Question

I have a pretty standard HTML form in which I collect user input. I have a submit button that will run a JavaScript function (onClick) that in turn validate the data entered by the users.

The function looks like this:

 function validateForm()
  {
    var isValid = true;

    var txtFirstname = document.getElementById("firstName").value;
    var txtLastname = document.getElementById("lastName").value;
    (etc...)



    /*Validate First Name*/
    if(txtFirstname.length <= 0){
        document.getElementById("lblFirstName").innerHTML=" *";
        isValid = false;
    }
    else{
        document.getElementById("lblFirstName").innerHTML="";
        document.getElementById("firstName").value = txtFirstname;
    }


    /*Validate last Name*/
    if(txtLastname.length <= 0){
        document.getElementById("lblLastName").innerHTML=" *";
        isValid = false;
    }
    else{
        document.getElementById("lblLastName").innerHTML="";
        document.getElementById("lastName").value = txtLastname;
    }

    (etc...)




    if(isValid){
        document.formX.submit();
    }
    else{
        return false 
    }

  }

My question is: how can I set the focus on the first “invalid” textbox after the function has validated the form?

Thanks,
Eric

Answer 1

It would be cleaner if you functionally decomposed your validation. Then you could have a variable called “firstInvalidField” which is initially set to null. Upon invalidation of a field, check to see if firstInvalidField is null, if it is, set it to the textBox in question. If it is not null, skip over the code.

After the validation is complete, if the firstInvalidField variable is not null, call .focus() on it.