How to display error message below the element using jQuery Validation plugin

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>

Add a tag like <div id="errormsg"></div> and place your message in there. — Grumpy
– Grumpy, Commented Oct 9, 2014 at 9:52

T J · Accepted Answer · 2014-10-09 10:30:03Z

As already mentioned in comments, You can change the CSS display property of the errorlabel 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>

Collectives™ on Stack Overflow

How to display error message below the element using jQuery Validation plugin

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related