My form is using jquery validation. However, the validation is not firing. I am sure it is just a tiny mistake somewhere.. anyone?

Here is fiddle link /

BAsically here is my jquery validation code

$(document).ready(function () {
  <!-- validation -->
  $('#submitDetails').validate({
    // 1. validation rules.
    rules: {
      firstName: {
           required: true,
            maxlength: 120
      },
      lastName:{
           required: true,
            maxlength: 120
      },      
      custom1: {
           required: true,
            maxlength: 120
      },
      state: {
        required: true
      },
      custom9: {
        required: true
      },      
      email: {
        required: true,
        email: true
      }
    },
    // 2. Validation fail messages
    messages: {
      custom9: {
        required: "You must agree to the terms of conditions in order to participate."
      }
    },
    errorPlacement: function(error, element) {
        if (element.attr("name") == "custom9" )
            error.appendTo("#error_msg");               
        else
            error.insertAfter(element);
    }       
  });
  ///execute when submit button is clicked
  $("#submit").click(function () {

  });
});

My form is using jquery validation. However, the validation is not firing. I am sure it is just a tiny mistake somewhere.. anyone?

Here is fiddle link http://jsfiddle/2L6xT/

BAsically here is my jquery validation code

$(document).ready(function () {
  <!-- validation -->
  $('#submitDetails').validate({
    // 1. validation rules.
    rules: {
      firstName: {
           required: true,
            maxlength: 120
      },
      lastName:{
           required: true,
            maxlength: 120
      },      
      custom1: {
           required: true,
            maxlength: 120
      },
      state: {
        required: true
      },
      custom9: {
        required: true
      },      
      email: {
        required: true,
        email: true
      }
    },
    // 2. Validation fail messages
    messages: {
      custom9: {
        required: "You must agree to the terms of conditions in order to participate."
      }
    },
    errorPlacement: function(error, element) {
        if (element.attr("name") == "custom9" )
            error.appendTo("#error_msg");               
        else
            error.insertAfter(element);
    }       
  });
  ///execute when submit button is clicked
  $("#submit").click(function () {

  });
});

• javascript
• jquery
• jquery-validate

1 Answer 1

In your html, the input element doesnot have name, the validator framework uses name to apply the rules

<input type="text" class="form-control" id="firstName" name="firstName" placeholder="First name" />

so along with id add name also(id is not required if it is not used elsewhere)

Demo: Fiddle