CODEWITHSUNDEEP
javascriptjqueryjquery-validate
user1592380
user1592380

Reputation: 36205

Jquery validation not being applied to field

enter image description here

I have a preexisting form which I'm trying to add jquery validation to containing :

         <p><span class="style9">City </span>
                        <input type="text" name="city" value="" size="20" class="style7"><span class="style9">
                        State </span>
                        <input type="text" name="state" value="" size="20" class="style7"><span class="style9">
                        Zip </span>
                        <input type="text" name="zip" value="" size="20" class="style7"><span class="style9">
                        Zip </span>
                        </p>

Using the jquery validator plugin, I have added:

$('form').validate({
    rules: {
        first_name: {
            minlen: 3,
            maxlength: 15,
            required: true
        },
        last_name: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
        email: {
          required: true,
          email: true
        },
         phone1: {
             required: true,
             phoneUS: true
          },
        phone2: {
             required: true,
             phoneUS: true
          },
            street: {
            required: true
          },
              city: {
            required: true
          },
              state: {
            required: true
          },
              zip: {
            zipcodeUS: true
          }

    },
    highlight: function(element) {
        $(element).closest('.style9').addClass('.style13');
        //$(element).addClass('.style13');
    },
    unhighlight: function(element) {
        $(element).closest('.style9').removeClass('.style13');
        //$(element).removeClass('.style13');
    },
    errorElement: 'span',
    errorClass: 'style13',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

As you can see in the screenshot the first 2 fields get the validation applied, but not the last. What am I doing wrong?

Upvotes: 0

Views: 321

Answers (1)

Sparky
Sparky

Reputation: 98718

To make the field "required" when it's left empty, you must use the required rule on it...

zip: {
   required: true,  // <- prevent it from being left empty
   zipcodeUS: true
}

DEMO: http://jsfiddle.net/rr8u9a46/

As noted in your other question, you've also misspelled the minlength rule on your first_name field.

$('form').validate({
    rules: {
        first_name: {
            minlen: 3,  // <-- minlength
            maxlength: 15,
            required: true
        },
        .....

NOTE: To use the zipcodeUS method, you must include the additional-methods.js file, which contains this rule.

Upvotes: 2

Related Questions