The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Clear all error messages
Terminator
post Apr 11 2016, 04:35 PM
Post #1


Advanced Member
****

Group: Members
Posts: 218
Joined: 19-March 15
Member No.: 22,398



The form I am working on will have multiple error messages for each textbox like email, first name, phone, etc.

Rather than do something like this:

CODE

var $ = function(id) { return document.getElementById(id); };

var resetForm = function() {
    $("email_error").innerHTML = "";
    $("phone_error").innerHTML = "";
    etc, etc, etc,....................
    $("email").focus();
};


What would the best way be to not have to put the _error.innerHTML for every single text box?

Maybe something like:

CODE


    $(name + "_error").innerHTML = "";



Because the name and id are the same as to what is before _error for all of these. So above code will clear all error messages at once.

Would this best be done involving Objects?

This post has been edited by Terminator: Apr 11 2016, 04:35 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 11 2016, 06:11 PM
Post #2


.
********

Group: WDG Moderators
Posts: 8,245
Joined: 10-August 06
Member No.: 7



What do the HTML elements that contain the error messages look like? Maybe you can loop through all of its kind (say all P elements), and check if their ID values contain "_error". The indexOf method is often used for this (a value of -1 means the string is missing).

But if you use CLASS instead of ID you might simply do

CODE
document.getElementsByClassName('error_msg')

instead, and loop through the resulting collection of elements.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Terminator
post Apr 11 2016, 06:45 PM
Post #3


Advanced Member
****

Group: Members
Posts: 218
Joined: 19-March 15
Member No.: 22,398



The error messages in HTML all look like this:

CODE

<span class="validate" id="email_error"></span>
<span class="validate" id="password_error"></span>
<span class="validate" id="first_name_error"></span>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 12 2016, 06:52 AM
Post #4


.
********

Group: WDG Moderators
Posts: 8,245
Joined: 10-August 06
Member No.: 7



In that case, either

CODE
var span=document.getElementsByTagName('span');
for(var i=0; i<span.length; i++)
{
    if(span[i].id.indexOf('_error')!=-1)
    {
        span[i].innerHTML='';
    }
}

or

CODE
var validate=document.getElementsByClassName('validate');
for(var i=0; i<validate.length; i++)
{
    validate[i].innerHTML='';
}

The getElementsByClassName method is only supported from IE9, otherwise both versions should work fine.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Terminator
post Apr 12 2016, 12:22 PM
Post #5


Advanced Member
****

Group: Members
Posts: 218
Joined: 19-March 15
Member No.: 22,398



thanks, that worked
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 14th November 2019 - 06:46 PM