Javascript DOM learning Chapter 8 Form Error prompt

In my opinion, the warning box is only used when the browser does not support other methods for displaying error messages. W3C recommends that we display an error message near the form item. This is a good method, so we only use the warning dialog box when the browser does not support this advanced method.
Example
Try the following example. Each item is required. In addition, I will insist on whether the email item has the @ symbol. If not, an error message is displayed. CopyCode The Code is as follows: var w3cdom = (document. getelementsbytagname & document. createelement );

Window. onload = function (){
Document. Forms [0]. onsubmit = function (){
Return validate ()
}
}

function validate () {
validform = true;
firsterror = NULL;
errorstring = '';
var x = document. forms [0]. elements;
for (VAR I = 0; I If (! X [I]. value)
writeerror (X [I], 'this field is required');
}< br> If (X ['email ']. value. indexof ('@') =-1)
writeerror (X ['email '], 'This is not a valid email address');
If (! W3cdom)
alert (errorstring);
If (firsterror)
firsterror. focus ();
If (validform)
alert ('all data is valid! ');
return false;
}

Function writeerror (OBJ, message ){
Validform = false;
If (obj. haserror) return;
If (w3cdom ){
OBJ. classname + = 'error ';
OBJ. onchange = removeerror;
VaR sp = Document. createelement ('span ');
Sp. classname = 'error ';
Sp. appendchild (document. createtextnode (Message ));
OBJ. parentnode. appendchild (SP );
OBJ. haserror = sp;
}
Else {
Errorstring + = obj. Name + ':' + message + '\ n ';
OBJ. haserror = true;
}
If (! Firsterror)
Firsterror = OBJ;
}

Function removeerror ()
{
This. classname = This. classname. substring (0, this. classname. lastindexof (''));
This. parentnode. removechild (this. haserror );
This. haserror = NULL;
This. onchange = NULL;
}

Explanation
First, we insist on whether W3C Dom is supported. This example can work on IE on Mac, but it does not work normally on other pages. Because the browser does not support W3C Dom enough, it cannot cope with all situations.

Then we created the onsubmit event processing.Program, This program calls our validation function validation ().

Copy code The Code is as follows: var w3cdom = (document. getelementsbytagname & document. createelement );

Window. onload = function (){
Document. Forms [0]. onsubmit = function (){
Return validate ()
}
}

Validate ()
Assume that the form is verified (validform = true), and we set firsterror = NULL. In the end, we will give the first error element a focus. Then create a string: errorstring, which contains all error messages. This is only for the W3C Dom browser.

Copy code The Code is as follows: var x = Document. Forms [0]. elements;
For (VAR I = 0; I <X. length; I ++ ){
If (! X [I]. value)
Writeerror (X [I], 'this field is required ');
}
If (X ['email ']. value. indexof (' @ ') =-1)
Writeerror (X ['email '], 'This is not a valid email address ');

The core of the vlidate () function is the same as that of the common function. Check for errors in any order you want. When you find an error, call writeerror () and pass it the wrong form item and error message.

If the browser does not support W3C Dom, use errorstring to generate a warning box. You may want to modify the content of the warning box.

Copy code The Code is as follows: if (! W3cdom)
Alert (errorstring );

For convenience, set the focus on the element of the first error.

Finally, validaform is returned. If it is true, the form is submitted. If it is not true, the submission is stopped.

Writeerror ()
This function is used to output error messages to form items. If it fails, the browser does not support W3C Dom and then sends the error message to errorstring.
This function will pass a form item and an error message.

Copy code The Code is as follows: function writeerror (OBJ, message)
{

First, set validform to false: This form is incorrect and should not be submitted.

Copy code The Code is as follows: validform = false;
}

Then, check whether an error message is displayed for a single table item. If yes, return to the validation () function. I don't want two error messages after the same item.

If (obj. haserror) return; check whether the browser supports W3C DOM:

Copy code The Code is as follows: obj. classname + = 'error ';

Set an onchange event handler for the error form item:

Copy code The Code is as follows: obj. onchange = removeerror;

Create a <span> to install the error message and set its class to "error ". Set the style to be rendered in CSS.

Copy code The Code is as follows: var sp = Document. createelement ('span ');
Sp. classname = 'error ';

Add an error message text node to <span>.

Copy code The Code is as follows: sp. appendchild (document. createtextnode (Message ));

Then add <span> to the corresponding form item and buy it (in this example, each form item has a <p> label ).

Copy code The Code is as follows: obj. parentnode. appendchild (SP );

Finally, set the haserror attribute for this form. This attribute can be used to indicate incorrect form items or to remove error messages in the future.

Copy code Code: obj. haserror = sp; 2}
For unsupported browsers, we store the name and error information of the Form Project in errorstring. This string will pop up at the end. Also set the haserror attribute for him.

[Code] else {
Errorstring + = obj. Name + ':' + message + '\ n ';
OBJ. haserror = true;
}

If the validform value is true at this time, set firsterror to the current element. This allows you to set focus in the future.

Copy code The Code is as follows: if (validform)
Firsterror = OBJ;
Removeerror ()

The onchange event handler of each error form item points to this function. If the user modifies the corresponding form items, the incorrect hypothesis has been corrected. Therefore, the error message should disappear.

First, remove the error item in the Form Item class. This is used to remove special error styles.

Copy code The Code is as follows: function removeerror (){
This. classname = This. classname. substring (0, this. classname. lastindexof (''));

Then, remove the error message. The haserror attribute points to the <span> that contains the information, so we remove it from the parent element of the form item.

Copy code The Code is as follows: This. parentnode. removechild (this. haserror );
Finally, some cleanup operations are performed. Set the haserror attribute to null, and then remove the onchange event handler.

[Code] This. haserror = NULL;
This. onchange = NULL;
}

Http://www.quirksmode.org/dom/error.html

reprinted please keep the following information
author: Beiyu (TW: @ rehawk)