Charkizard February 2016

jQuery Validate is not working

It's my first time using jQuery Validation and I'm running into issues. This is my form's HTML:

<form id="signup" novalidate="novalidate">
            <div class="form-group">
              <label class="sr-only" for="emailAddress">Email address</label>
              <input type="email" class="form-control" id="emailAddress" placeholder="Enter email" data-required>
            </div>
            <div class="form-group">
              <label class="sr-only" for="emailAddressConfirm">Confirm Email address</label>
              <input type="email" class="form-control" id="emailAddressConfirm" placeholder="Confirm email" data-required>
            </div>
            <div class="form-group">
              <label class="sr-only" for="password">Password</label>
              <input type="password" class="form-control" id="password" placeholder="Password" data-required>
            </div>
            <div class="form-group">
              <label class="sr-only" for="passwordConfirm">Confirm Password</label>
              <input type="password" class="form-control" id="passwordConfirm" placeholder="Confirm Password" data-required>
            </div>
            <button type="submit" class="btn btn-primary">Sign up</button>
          </form>

And my JavaScript:

$("form#signup").on("submit", function(){
    $("form#signup").validate({
        rules: {
            password: {
                required: true,
                minlength: 5
            },
            passwordConfirm: {
                required: true,
                minlength: 5,
                equalTo: "#password"
            }
        },
        messages: {
            password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long"
                 

Answers


Sparky February 2016

1) You're missing the name attributes from all of the relevant input elements. This is absolutely required in order for this plugin to operate properly.

Documentation:

The name attribute is "required" for input elements, the validation plugin doesn't work without it.

Although not stated, the name attributes must also be unique as this is how the plugin keeps track of all validated form elements.


2) Absolutely, do NOT wrap your call to .validate() within a submit or click handler. Simply call it on document ready.

$(document).ready(function(){

    $("form#signup").validate({ // initialize plugin on your form
        ....

The .validate() method is only used to initialize the plugin and the click event of the submit is captured and intercepted automatically.


Working DEMO: http://jsfiddle.net/L7q7oapc/

Notice that you do not need to duplicate the same rules on the second password field. Since it must always match the first, these are superfluous.

$("form#signup").validate({
    rules: {
        password: {
            required: true,
            minlength: 5
        },
        passwordConfirm: {
            equalTo: "password" // 'name' of other field
        }
    }

Please refer to the sample code and tips on the SO Tag Wiki page.

Post Status

Asked in February 2016
Viewed 2,542 times
Voted 13
Answered 1 times

Search




Leave an answer