Show error messages in div container for validations using Jquery

Question

I'm trying to show error messages in div container using jQuery for validation.

So, instead of an alert message, I want to show the error message after every control where ever the validation fails.

if (name == '' || email == '' || mobile == '' || password == '' || cpassword == '') {
var errName = document.getElementByID("name");
errName.innerHTML += "Please enter name";
errName.innerHTML += ".red {color:red;}";
document.getElementByID("name").val = errName;

Any suggestions?

Actually, I am new to Jquery. Any ways ,I will try doing that. Thanks... — Harsh Singhi
– Harsh Singhi, Commented Mar 10, 2015 at 6:45

benzonico · Accepted Answer · 2015-03-11 09:21:49Z

7

A more pure jQuery approach would be as shown below

jQuery Code

if (name == '' || email == '' || mobile == '' || password == '' || cpassword == '') {
   var errName = $("#name"); //Element selector
   errName.html("Please enter name"); // Put the message content inside div
   errName.addClass('error-msg'); //add a class to the element
}

CSS:

.error-msg{
   background-color: #FF0000;
}

Update:
You can even combine the jQuery methods on any selector. Whenever we apply a jQuery menthod on any selector, it returns a "this" pointer, so we can combine multiple methods and apply them to a selector using a single statement. This is called "chaining"

Read more here: http://www.w3schools.com/jquery/jquery_chaining.asp

if (name == '' || email == '' || mobile == '' || password == '' || cpassword == '') {
       $("#name").html("Please enter name")
                 .addClass("error-msg"); // chained methods
    }

edited Mar 11, 2015 at 9:21

benzonico

10.9k5 gold badges46 silver badges51 bronze badges

answered Mar 10, 2015 at 12:07

Yameen

5951 gold badge6 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hkidd · Accepted Answer · 2015-03-10 08:30:25Z

0

if (name == '' || email == '' || mobile == '' || password == '' || cpassword == '') {
   var errName = $("#name"); //get element by ID
   errName.append("Please enter name"); //append information to #name
   errName.attr("style", "background-color: red;"); //add a style attribute
}

Edit: or you could do it like so:

if (name == '' || email == '' || mobile == '' || password == '' || cpassword == '') {
   var errName = $("#name"); //get element by ID
   errName.append("Please enter name"); //append information to #name
   errName.attr("class", "alert"); //add a class to the element
}

Then you will have an .alert class. This makes it possible for you to use this class in your CSS file.

.alert {
   background-color: #FF0000;
}

edited Mar 10, 2015 at 8:30

answered Mar 10, 2015 at 8:07

Hkidd

91213 silver badges27 bronze badges

Collectives™ on Stack Overflow

Show error messages in div container for validations using Jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related