Question

I’m using JQuery Validation Plugin in a jQuery Mobile project. I’ve a simple login form where I need to ensure that both user name and password fields are not empty. Here´s the HTML:

            <form id="my_form">
                <input type="text" id="username" placeholder="User" class="required" />
                <input type="password" id="userpsw" placeholder="Password" class="required" />
                <input class="submit" type="submit" value="Login"/>
            </form>

And here’s the code:

             $(document).on("pageinit", function(){        
                $("#my_form").validate({
                    submitHandler: function(form) {
                      alert("All fields ok!");
                    }
                 });
            });

The problem is that only the user name field is being validated. With only the user name filled, when I press the submit button, the “All fields ok” dialog is shown. I’ve tested this in Chrome and Firefox, and the result is the same.

Am I doing something wrong? Does this plugin work with passwords?

---

UPDATE: I’ve changed the password input type to “text”, and it keeps failing.

Answer 1

Did you try to set a name attribute on your input elements?

The jQuery validation plugin requires every <input /> element to have a valid name attribute set. From the documentation:

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

Markup recommendations