JavaScript Dom Learning eighth Chapter Form Error Tips _ Basics

In my opinion, the warning box is only used when the browser does not support other ways to display error messages. The Consortium recommends that we display an error message near the form item. This is a good idea, so we only use the warning dialog when browsers don't support this advanced approach.
Example
Try the following example. Every item is a must. In addition I will insist that the email item has @ symbol. If not, an error message is also prompted.

Copy Code code 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<x.length;i++) {
if (!x[i].value)
Writeerror (X[i], ' This field is required ');
}
if (x[' email '].value.indexof (' @ ') = = 1)
Writeerror (x[' email '), ' this isn't 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;
}

Explain
First of all, we insist on support for the consortium DOM. This example works with IE on the Mac, but it is normal to not work on other pages. Because that browser's support for the DOM is not enough to handle all the situations.

Then we created the OnSubmit event handler, which calls our validation function validation ().

Copy Code code as follows:

var w3cdom = (document.getelementsbytagname && document.createelement);

Window.onload = function () {
Document.forms[0].onsubmit = function () {
return Validate ()
}
}

Validate ()
We assume that the form is validated (validform=true) and we set the Firsterror=null. Eventually we will give the first error element a focus. Then create a string: ErrorString, which contains all the error messages. This is only for the web-only Dom browser.

Copy Code code 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 isn't a valid email address ');

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

If the browser does not support the ErrorString DOM, generate a warning box with the. You may want to revise the contents of the warning box.

Copy Code code as follows:

if (! W3cdom)
alert (errorstring);

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

Finally, return validaform, if it is true, to submit the form, and if not, stop submitting.

Writeerror ()
This function is used to output the error message to the form item. If it fails, the browser does not support the ErrorString DOM, and then sends the error message to the Web.
This function passes a form item and an error message.

Copy Code code as follows:

function Writeerror (obj,message)
{

First we set ValidForm to false: This form is not filled in correctly and should not be submitted.

Copy Code code as follows:

ValidForm = false;
}

It then detects if a table item already has an error prompt. If so, return to the validation () function, and I don't want to have two more error prompts after the same item.

if (obj.haserror) return; Check to see if the browser supports the consortium DOM:

Copy Code code as follows:

Obj.classname + = ' ERROR ';

Next, set a onchange event handler for the error table item:

Copy Code code as follows:

Obj.onchange = Removeerror;

Create a <span> to load the error message, and set its class to "error". Inside the CSS, set the style to render.

Copy Code code as follows:

var sp = document.createelement (' span ');
Sp.classname = ' ERROR ';

A text node that adds an error message to <span>.

Copy Code code as follows:

Sp.appendchild (document.createTextNode (message));

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

Copy Code code as follows:

Obj.parentNode.appendChild (SP);

Finally, set the Haserror property for this form. This property can be used to indicate that a form item with an error can also easily remove the error message in the future.

Copy Code code as follows:

Obj.haserror = SP; 2}
For browsers that are not supported, we keep the name and error information of the form item in ErrorString. This string will pop up at the end. Also set haserror properties for him.

[Code] Else {
ErrorString + = Obj.name + ': ' + message + ' \ n ';
Obj.haserror = true;
}

If this time the ValidForm value is True then the Firsterror is set to the current element. To set the focus in the future.

Copy Code code as follows:

if (ValidForm)
Firsterror = obj;
Removeerror ()

The onchange event handlers for each error table item point to this function. If the user modifies the corresponding form item, our polite assumption error has been corrected. Therefore, the error message should disappear.

First remove the error entry in the class of the form item. This is used to remove special error styles.

Copy Code code as follows:

function Removeerror () {
This.classname = this.className.substring (0,this.classname.lastindexof ("));

Then remove the error message. The Haserror property points to the <span&gt that contains the information, so we remove it from the parent element of the form item.

Copy Code code as follows:

This.parentNode.removeChild (This.haserror);
Finally, do some cleaning. Set the Haserror property to null, and then remove the onchange event handler.

[code]this.haserror = null;
This.onchange = null;
}

Translation Address: http://www.quirksmode.org/dom/error.html

Reprint please keep the following information
Author: North Jade (TW: @rehawk)