javascript - Show error messages in div container for validations using Jquery - Stack Overflow

admin管理员组

文章数量:1279188

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?

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?

• javascript
• jquery
• css
• html

Share Improve this question Follow edited Mar 10, 2015 at 3:17 AstroCB 12.4k2020 gold badges5959 silver badges7474 bronze badges asked Mar 10, 2015 at 3:05 Harsh SinghiHarsh Singhi 11722 gold badges55 silver badges1414 bronze badges 3

• Use a jquery validation plugin. – RaviH Commented Mar 10, 2015 at 3:23
• where issue we will be suggesting? – Nin-ya Commented Mar 10, 2015 at 3:30
• Actually, I am new to Jquery. Any ways ,I will try doing that. Thanks... – Harsh Singhi Commented Mar 10, 2015 at 6:45

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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 bine the jQuery methods on any selector. Whenever we apply a jQuery menthod on any selector, it returns a "this" pointer, so we can bine multiple methods and apply them to a selector using a single statement. This is called "chaining"

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

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

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;
}

本文标签： javascriptShow error messages in div container for validations using JqueryStack Overflow