Adding own rule in jquery validation plugin

Question

I have next jquery code:

$("input").rules("add", {
    required: true,
    messages: {
        required: 'Please enter your telephone number'
    },
    errorPlacement: function(error, element) {
        console.log('bob');
        element.insertBefore(error);
    }
});

I am trying to add new rule like in answer in this question : jquery validation & id's ft numbers

I have such html code:

<form method='post' action='' id='#countersForm'>
<input id="88" class="counter_input active" type="text" enabled="">
<input id="89" class="counter_input active" type="text" enabled="">
</form>

My problems are:

1) Why browser tries to validate field on page loaded? I don't need this (message bob appeaing on page load.

2) Why only first input field is validating? I want to validate all fields.

3) Why console says , that element is not defined?

documentation says that element parameter contain validated element. console.log(element) says that it is undefiened. Why?

Maybe not the issue but nontheless: use valid id values (don't begin with a digit or hash character, also mentioned in your linked post). Also enabled isn't a thing. — No Results Found
– No Results Found, Commented Mar 18, 2014 at 13:38
Best is to setup a jsFiddle..I started one for you : jsfiddle.net/dEWEm please complete..it would be best. — Dory Zidon
– Dory Zidon, Commented Mar 18, 2014 at 13:39
In addition to what has been said give each input a name attribute. I have seen some wonky behavior from un-named inputs. — Jay Blanchard
– Jay Blanchard, Commented Mar 18, 2014 at 13:47
Sad. Just left home. I will end jsfiddle later, add name attribute and change id-s to id-xxx — Sharikov Vladislav
– Sharikov Vladislav, Commented Mar 18, 2014 at 13:50

T J · Accepted Answer · 2014-03-18 14:08:08Z

1

From documentation:

Read, add and remove rules for an element.

it says 'an' element. $('input') in your case returns two elements.

validation plugin uses name attribute of elements, your element's doesn't have names.

You have to initialize the plugin using validate() method on the form you want to validate, for e.g.

$("#myform").validate({ //where my form is the id of your form
 rules: {
  name: "required", //name is the name of your element
 },
 messages: {
 }
});

edited Mar 18, 2014 at 14:08

answered Mar 18, 2014 at 14:01

T J

43.2k13 gold badges87 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Sharikov Vladislav Over a year ago

Why I have duplicate id? I have id 89 and 88. But thanks for your answer.

Sharikov Vladislav Over a year ago

True. But names would be variables for each user. First one has counters with id's 55 65, another has id's 777 888 etc. I had found solution, which is presented in my question.

Joe RR Over a year ago

i use this same method to validate my forms too. you are right.

Sharikov Vladislav Over a year ago

@LeandroRuel who is right? Can you suggest code from your site then? Or write simple working example. Or you meant Tilwin? The problem I have variable names, not static, read previous comment. If you have same comp give an example please. Thank you.

Joe RR Over a year ago

you are generating these fields with any language at backend?

|

Community · Accepted Answer · 2017-05-23 12:05:21Z

Thanks for your answers and comments.

I solved my problem. Working code (current problem is solved) is here: http://jsfiddle.net/2LRv7/2/

There was a huge mistake in my js code. I put errorPlacement section to the rules function. I have to put this option to .validate section.

$("#countersForm").validate({
    errorPlacement: function (error, element) {
        console.log(error);
        var br = $( "<br>" );
        error.insertAfter(element);
        br.insertAfter(element);
    }
});

Also, as @TilwinJoy said, I used $('input').rules(/*....*/) wrong. I had to use each function.

This code is okay:

$("input").each(function () { // next code will affect all input fields
    $(this).rules("add", { // $(this) is my input field
    required: true,
        digits: true,
        messages: {
            required: 'Это поле обязательно для заполнения',
            digits: 'В поле могут быть только цифры'
        }
    });
});

Current problem solved, but I have another. If you want to help check this question: Class is not being added to the error element on first check , but when field is being checked again all going ok (jquery validation plugin)

Collectives™ on Stack Overflow

Adding own rule in jquery validation plugin

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related