Categories:

Validating a form's inputs or a function's arguments

There really is no answer to the question, "How do I validate a form?", because when you say you're validating the form, you're really confirming the inputs to the form are formatted correctly for the form. Likewise, validating a function's arguments are valid for that function is simply confirming the inputs are correctly formatted.

I have long distrusted the <input type="Submit"> button. Often, this does not work out as we JavaScripters expect. On the other hand, JavaScript does provide a method for submitting a form. For instance, the form this page is using is called Tester. So, the line: 

document.forms.Tester.submit()

works just fine for submitting this form. (Don't worry -- this form doesn't go anywhere.) In my professional opinion as a JavaScripter, it is simply easier to use a flag variable as an indicator of whether or not the form's inputs are valid, and then, if the flag is still valid, to submit the form.

Here's a group of inputs which demonstrate the example.

The source for this form is here:

<INPUT TYPE="text" NAME="line1" VALUE="Test" SIZE="15">
<INPUT TYPE="text" NAME="line2" VALUE="Form" SIZE="15">
<INPUT TYPE="button" VALUE="Validate and Submit!" onClick="validateTester()">

The validateTester() function is an ordinary button I use in place of the submit button. (In reality, the submit button is simply a button which submits the form, nothing more. So we can use an ordinary button instead.) The source for this function, and main focus of this page, I place here:

function validateTester() {
    var flag = true
    var Tester = document.forms.Tester
    if (Tester.line1.value!="JavaScript") {
        alert("First box must say 'JavaScript'!")
        flag = false
        }
    if (Tester.line2.value!="Kit") {
        alert("Second box must say 'Kit'!")
        flag = false
        }
    if (flag) {
        alert("Form is valid! Submitting form...")
        document.forms.Tester.submit()
        }
    }

Note the flag is initially set to true. The reason is we will only be checking certain conditions on the form -- and if those conditions pass, then the rest of the form's inputs are assumed valid (otherwise we'd validate them in the function!) and we can submit the form.

The first if statement checks to see if the line1.value is NOT "JavaScript". If it is NOT set to "JavaScript", the flag is set to false. Then, it doesn't matter what the other values are. With the flag set to false, the statement to submit the form is not executed.

If the second box is NOT "Kit", the flag is set to false. This function does not care what flag's current value is -- it simply sets flag to false at that step.

Finally, the call upon flag is made. If it is true, it will submit the form.

A little elementary logic will show you the decision tree.

Flag Value
At Start		 "JavaScript"
Box 1		 "Kit"
Box 2		 Flag
TRUE TRUE TRUE TRUE
TRUE FALSE TRUE FALSE
TRUE TRUE FALSE FALSE
TRUE FALSE FALSE FALSE

It doesn't get much simpler than this. Incidentally, your flag variables do not have to be true or false values. Here's an example:

function radioval(obj) {
    var flag = -1
    for (var k = 0; k < obj.length; k++) {
        if (obj[k].checked) {
            flag = k
            }
        }
    return flag
    }

This sample function is one you can use to search radio button objects. It returns -1 if no radio button is checked, or the index number of the checked radio button.

Interrupting a function safely