如何使用jQuery Validation插件在元素下方显示错误消息

Question

Below is the jquery Validation code which is working perfectly, except one thing - it displays error message inline, I want to show the error message below the elements. How can i do it?

 $(document).ready(function() { $.validator.addMethod("email", function(value, element) { return this.optional(element) || /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\\.[a-zA-Z.] {2,5}$/i.test(value); }, "Please enter a valid email address."); $.validator.addMethod("username",function(value,element) { return this.optional(element) || /^[a-zA-Z0-9._-]{3,16}$/i.test(value); },"Username are 3-15 characters"); $.validator.addMethod("password",function(value,element) { return this.optional(element) || /^[A-Za-z0-9!@#$%^&*()_]{6,16}$/i.test(value); },"Passwords are 6-16 characters"); // Validate signup form $("#signup").validate({ rules: { email: "required email", username: "required username", password: "required password", }, }); }); 

 body { font-family:Arial, Helvetica, sans-serif; font-size:13px; } input { width:220px; height:25px; font-size:13px; margin-bottom:10px; border:solid 1px #333333; } label.error { font-size:11px; background-color:#cc0000; color:#FFFFFF; padding:3px; margin-left:5px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script> <form method="post" action="thank.html" name="signup" id="signup"> Email<br /> <input type="text" name="email" id='email'/><br /> UserName<br /> <input type="text" name="username" id="username" /><br /> Password<br /> <input type="password" name="password" id="password" /><br /> <input type="submit" value=" Sign-UP " name='SUBMIT' id="SUBMIT"/> </form> 

Answer 1

As already mentioned in comments, You can change the CSS display property of the error label to block so that it is rendered in a new line:

 $(document).ready(function () { $.validator.addMethod("email", function (value, element) { return this.optional(element) || /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\\.[a-zA-Z.] {2,5}$/i.test(value); }, "Please enter a valid email address."); $.validator.addMethod("username", function (value, element) { return this.optional(element) || /^[a-zA-Z0-9._-]{3,16}$/i.test(value); }, "Username are 3-15 characters"); $.validator.addMethod("password", function (value, element) { return this.optional(element) || /^[A-Za-z0-9!@#$%^&*()_]{6,16}$/i.test(value); }, "Passwords are 6-16 characters"); // Validate signup form $("#signup").validate({ rules: { email: "required email", username: "required username", password: "required password", }, }); }); 

 body { font-family:Arial, Helvetica, sans-serif; font-size:13px; } input { width:220px; height:25px; font-size:13px; margin-bottom:10px; border:solid 1px #333333; } label.error { display:block; /* change the display to block*/ width:200px; /*if necessary*/ font-size:11px; background-color:#cc0000; color:#FFFFFF; padding:3px; margin-left:5px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script> <form method="post" action="thank.html" name="signup" id="signup">Email <br /> <input type="text" name="email" id='email' /> <br />UserName <br /> <input type="text" name="username" id="username" /> <br />Password <br /> <input type="password" name="password" id="password" /> <br /> <input type="submit" value=" Sign-UP " name='SUBMIT' id="SUBMIT" /> </form> 

---

Or you can use the errorElement option to specify a custom block element in which to display the error:

 $(document).ready(function () { $.validator.addMethod("email", function (value, element) { return this.optional(element) || /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\\.[a-zA-Z.] {2,5}$/i.test(value); }, "Please enter a valid email address."); $.validator.addMethod("username", function (value, element) { return this.optional(element) || /^[a-zA-Z0-9._-]{3,16}$/i.test(value); }, "Username are 3-15 characters"); $.validator.addMethod("password", function (value, element) { return this.optional(element) || /^[A-Za-z0-9!@#$%^&*()_]{6,16}$/i.test(value); }, "Passwords are 6-16 characters"); // Validate signup form $("#signup").validate({ rules: { email: "required email", username: "required username", password: "required password", }, errorElement : 'div' }); }); 

 body { font-family:Arial, Helvetica, sans-serif; font-size:13px; } input { width:220px; height:25px; font-size:13px; margin-bottom:10px; border:solid 1px #333333; } div.error { width:200px; font-size:11px; background-color:#cc0000; color:#FFFFFF; padding:3px; margin-left:5px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script> <form method="post" action="thank.html" name="signup" id="signup">Email <br /> <input type="text" name="email" id='email' /> <br />UserName <br /> <input type="text" name="username" id="username" /> <br />Password <br /> <input type="password" name="password" id="password" /> <br /> <input type="submit" value=" Sign-UP " name='SUBMIT' id="SUBMIT" /> </form>