Question

This is part of an assignment. Everything that’s supposed to work, already works, but there’s something that bothers me. The only purpose of the code so far is to test our ability to validate from data. Anyway, right now the validate() function is attached to a submit button:

<input type="submit" value="Find Love" onclick="validate()">

When any validation fails, all the text boxes, drop downs, etc. are cleared, but I want them to retain their values and just focus on the first incorrect value (retaining their values is more important to me at this point). The actual Does that require some modification of the onclick function or a different function all together? Please help. If you need to see the javascript I can post that as well.

function validate()
{
var blnValid = true;

if(isBlank("txtFName"))
{
    blnValid = false;
    alert("First name cannot be blank!")
    document.getElementById("txtFName").focus();
}

if(blnValid)
{   
    if(isBlank("txtLName"))
    {
        blnValid = false;
        alert("Last name cannot be blank!")
        document.getElementById("txtLName").focus();
    }
}
if(blnValid)
{
    if(isBlank("txtAge"))
    {
        blnValid = false;
        alert("Age cannot be blank!")
        document.getElementById("txtAge").focus();
    }
}
if(blnValid)
{
    var strInput = document.getElementById("txtAge").value;
    if(!isInt(strInput))
    {
        blnValid = false;
        alert("You must enter a valid number in the age field.")
        document.getElementById("txtAge").select();
    }
}
if(blnValid)
{
    if(document.getElementById("selUserGender").selectedIndex <= 0)
    {
        alert("Please select your gender");
        blnValid = false;
    }
}
if(blnValid)
{
    if(document.getElementById("selFindGender").selectedIndex <= 0)
    {
        alert("Please select your gender");
        blnValid = false;
    }
}
if(blnValid)
{
    blnChecked = false;
    arRadio = document.forms[0].rdbAgeRange;
    for (var i = 0; i < arRadio.length; i++)
    {
        if(arRadio[i].checked)
        {
            blnChecked = true;
            break;
        }
    }
    if (!blnChecked)
    {
        alert("You must select an age group.");
        blnValid = false;
    }
}
if(blnValid)
{
    if(!document.getElementById("chkSkeeball").checked
        && !document.getElementById("chkAir").checked
        && !document.getElementById("chkCliff").checked
        && !document.getElementById("chkHamster").checked)
    {
        blnValid = false;
        alert("You must select a hobby.")
    }   
}

return blnValid;
}


function isInt(strValue)
{
var validNums = "0123456789";
var blnIsNumber = true;
var tempChar;

for (var i = 0; i < validNums.length; i++)
{
    tempChar = strValue.substr(i, 1);
    if (validNums.indexOf(tempChar) == -1)
    {
        return false;

    }
}
return true;
}

function isBlank(elementID)
{
if(document.getElementById(elementID).value.length == 0)
{
    return true;
}

return false;
}

Answer 1

Your problem is actually your HTML. Nothing in your Javascript is going to clear the elements but because you’re using onClick the form is actually submitting anyway. I assume that it probably just submits back to the page and clears everything. Instead of onClick use onSubmit in the form element:

<form method="post" action="url_of_action" onSubmit="return validate()">

If it’s not valid it will prevent the form from submitting.