当前位置: 动力学知识库 > 问答 > 编程问答 >

How to validate a login form with jQuery?

问题描述:

Can anyone please tell me how to validate a login form with the jQuery Validate plugin?

I tried this code:

 <script src="jquery-1.8.3.js"></script>

<script src="loginbut/js/login.js"></script>

<script src="jquery.validate.js" type="text/javascript">

</script>

<script>

$(document).ready(function(){

$("#loginform").validate({

rules:{

//name:"required",

username:"required",

password:"required",

gender:"required",

},

messages:{

email:"This field cannot be empty",

password:{

required:"specify password",

},

});

});

</script>

and html code as:

<div id="bar">

<div id="container">

<!-- Login Starts Here -->

<div id="loginContainer">

<a href="#" id="loginButton"><span>Login</span><em></em></a>

<div style="clear:both"></div>

<div id="loginBox">

<form id="loginForm">

<fieldset id="body">

<fieldset>

<label for="email">Username</label>

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

</fieldset>

<fieldset>

<label for="password">Password</label>

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

</fieldset>

<input type="submit" id="login" value="Sign in" />

<label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>

</fieldset>

<span><a href="#">Forgot your password?</a></span>

</form>

</div>

</div>

<!-- Login Ends Here -->

</div>

</div>

Validation is not working.

Please help me out.

网友答案:

It's not working because you have a multitude of syntax and formatting errors. The validate() plugin uses the name attribute on input fields. Your two fields are using email and password for their name attribute. I don't even know why your function contains gender, because it's not contained in your HTML anywhere that I can see.

Your code has many problems:

  • missing a closing brace, }
  • you do not have a field named "gender", so I removed this rule.
  • username:"required", is not typical format for this rule. Should be required: true,
  • improperly targeting "username" when the field's name attribute is "email"
  • you misspelled #loginForm in your jQuery code
  • you do not need class="required" in the input if you're going to specify rules within the jQuery, so remove that from your HTML.
  • many "trailing commas" removed which will cause issues in certain versions of Explorer

Just a tip: Many of your syntax errors would be much easier to spot when the code is properly indented.

Assuming the HTML of your form is correct, your jQuery should look like this:

$(document).ready(function(){

    $("#loginForm").validate({
        rules: {
            email: {
                required: true
            },
            password: {
                required: true
            }
        },
        messages: {
            email: {
                required: "specify email"
            },
            password: {
                required: "specify password"
            }
        }
    });

});

Working Demo:

http://jsfiddle.net/fYdkL/1/


Documentation:

http://docs.jquery.com/Plugins/Validation

Official Examples:

http://jquery.bassistance.de/validate/demo/

分享给朋友:
您可能感兴趣的文章:
随机阅读: