Question

I need to validate a form using JavaScript. The form keep changes since I am using data from a field name table to print each field (like name, address, phone no.). I’m using a loop to print the label for field and corresponding text input tag. (eg. name : textbox to enter name, phone no : textbox to enter phone no.) And at last getting these values in an array when submitting the form and entering into details table.

Following is the code for printing each field and text box:

while ($row=mysql_fetch_array($result)){
    echo'<labelfor='.$row['field_name'].'name=field_id>'.$row['field_name'].':</label>';                        
    echo'<inputtype="text" name=field_name[]id="'.$row['field_id'].'":value="'.$row['field_value'].'" size="20" class = "inpBox" >';
}

Now I need to check whether these fields are empty using JavaScript and then change the style of that particular text box. Any help will be greatly appreciated.

Answer 1

You’ll want to hook on the submit event for your form. You could then do something like:

This is for jQuery:

$("form").submit(function{
    $('input[type="text"]',"form").each(function(){
        var $me = $(this);
        var status = true;
        if($me.val() == ""){
            $me.addClass("input-validation-error");
            status = false;
        }
        //Return status. True=Form is valid, False=Form is NOT valid
        return status;
    });
});

You can read more here: http://api.jquery.com/submit/

To get the values for javascript, you could do something like:

var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
    var me = inputs[i];
    if(me.value == "") {
        me.className = "input-validation-error";
    }
}​