jQuery Validation Plugin addMethod

Question

I'm trying to use jQuery validation plugin to validate a few form fields by using custom add.method, and I need some help with it. Here is my html form.

<form method="post" action="<?=$PHP_SELF?>" name="sf" id="sf">

 <p>
 <label for="name">Name:</label>
   <input type="text" name="name"  id="name" /><br />
 </p>

 <p>
 <label for="email">Email:</label>
   <input type="text" name="email"  id="email" /><br />
 </p>

</form>

Basically I'm trying a very basic rule to check if the Name field is not empty. I'm trying following, Please let me know if it is correct?

<script type="text/javascript">
$(document).ready(function() {
$.validator.addMethod("name",function(value,element){
    return this.optional(element) || (i.test(value) > 0);
    },"Name is required");         
        $("#sf").validate({
                rules: {
                name: true,
                },
        });
    });
</script>

I want to display the name error message in front of the Name field in the form. How I can do that? Thanks for any help.

Andrew Whitaker · Accepted Answer · 2011-01-30 22:42:45Z

6

If you just want to make a form element required, you should add a class required on the element:

<input type="text" name="name"  id="name" class="required" />

This will automatically get picked up by validate.

If you're doing this just to figure out how to add a custom rule, I'd recommend against using a rule called "name" (I had problems with it in a simple example). Here's how you could add a custom rule that ensures "name" is only characters:

$.validator.addMethod("customname", function(value, element) {
    var i = /^[A-Za-z]+$/;
    return this.optional(element) || (i.test(value) > 0);
}, "Name is required");

$("#sf").validate({
    rules: {
        name: {
            customname: true
        }
    }
});

Note that inside the rules object you have to specify another object (name) that defines the rules for that element.

As for placing the error in a specific place, check out the errorPlacement option:

errorPlacement: function(error, element) {
    element.closest("p").prepend(error);
}

Would place the error between the label and the input.

Here's an example of the two in action: http://jsfiddle.net/andrewwhitaker/7xD2H/

edited Jan 30, 2011 at 22:42

answered Jan 30, 2011 at 22:12

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

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

3 Comments

PhiLho Over a year ago

I know you used the OP's code, but for the record, test() returns a boolean, not a number.

user9008566 Over a year ago

Did you use ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js in your fiddle? Looks like verision 1.4.4? If you do not use the right script you get a cannot define addMethod error

user9008566 Over a year ago

....I am getting an error using your code: stackoverflow.com/questions/54384682/…

jamesmortensen · Accepted Answer · 2011-01-30 22:08:15Z

0

This will accomplish what you are trying to do:

 $(document).ready( function() {
     $('#sf').validate();
     $("#name").rules("add", {
         required: true,
         minlength: 0,
         messages: {
             required: "Name is required"               
         }
     });
 });

answered Jan 30, 2011 at 22:08

jamesmortensen

34.2k11 gold badges102 silver badges124 bronze badges

Collectives™ on Stack Overflow

jQuery Validation Plugin addMethod

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related