JavaScript : Advanced Form Management
Contents ]
Mikael Le Moal

Putting the Pieces Together

The last thing to do is to group all the functions in one procedure so that all checks are carried out when the form is submitted. This is the role of the function check which is called up when the onSubmit event occurs:

67: function check(f) {
68:    
69:    Checked = noHtml(f.texte.value);
70:    f.texte.value = Checked;
71:    
72:    res = verifNb(f.valeur,1);
73:    if (res == false) {
74:       alert('This is not a valid value!');
75:       f.valeur.focus();
76:       return false;
77:    }
78:
79:    res = nonVide(f.valeur);
80:    if (res == false) {
81:       alert('The Number field is mandatory!');
82:       f.valeur.focus();
83:       return false;
84:    }
85:
86:   res = nonVide(f.texte);
87:    if (res == false) {
88:       alert('The Text field is mandatory!');
89:       f.texte.focus();
90:       return false;
91:    }
92: res = desactiveForm(f);
93: return true;
94: }

The function starts with a call to noHtml() which removes all the HTML tags from the text (line 69). The tagged text is then replaced by the cleaned up version (line 70). The function verifNb checks the validity of the numerical value. If the result is false, an alert message is displayed and the field receives the focus (lines 72 to 77).

The function nonVide is called up twice to ensure that the two fields are not empty (lines 79 to 84 for the field with id valeur, and lines 86 to 91 for the field texte). Finally, the function desactiveForm() eliminates the possibility of resubmitting the form.

A last look at the result.

And then what? The form values could be sent for processing to a CGI script, PHP or of other type.




  1   2   3   4   5