在javascript验证失败后保留表单值onclick

时间:2011-07-14 14:48:45

标签: javascript html onclick validation

这是作业的一部分。一切应该起作用的东西已经有效了,但有些东西困扰着我。到目前为止,代码的唯一目的是测试我们从数据验证的能力。无论如何,现在validate()函数被附加到提交按钮:

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

当任何验证失败时,所有文本框,下拉列表等都会被清除,但我希望它们保留它们的值并只关注第一个不正确的值(保留它们的值对我来说更重要) 。实际是否需要对onclick函数或其他函数进行一些修改?请帮忙。如果您需要查看javascript我也可以发布。

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;
}

2 个答案:

答案 0 :(得分:1)

您的问题实际上是您的HTML。您的Javascript中没有任何内容可以清除元素,但因为您正在使用onClick,所以表单实际上仍在提交。我假设它可能只是提交回页面并清除所有内容。而不是onClick在表单元素中使用onSubmit:

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

如果它无效,则会阻止表单提交。

答案 1 :(得分:0)

缺少分号:

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

if(blnValid)
{   
    if(isBlank("txtLName"))
    {
        blnValid = false;
        alert("Last name cannot be blank!") //and here
        document.getElementById("txtLName").focus();
    }
}
if(blnValid)
{
    if(isBlank("txtAge"))
    {
        blnValid = false;
        alert("Age cannot be blank!") //and here
        document.getElementById("txtAge").focus();
    }
}