JavaScript 在第二次提交请求时未验证表单

JavaScript not validating form on second submit request

本文关键字：验证 表单 请求 第二次 提交 JavaScript      更新时间：2023-09-26

我有JavaScript代码，可以在第一次提交请求时验证表单，但是如果用户再次点击提交，即使他们没有纠正表单错误，表单也不会处理验证功能，只会提交。

我希望每次用户单击提交按钮时都执行验证功能。

感谢您的任何帮助，下面的代码。马丁

<form action="site.url" method="post" name="signup" onsubmit="return validateForm()"> 
    <label for="firstname"><span id="inactiveErrorFname">Please enter your first name<br></span>
        First name <strong title="Required" class="required">*</strong></label><br>
    <input type="text" name="firstName">
    <label for="surname"><br><span id="inactiveErrorSname">Please enter your Surname<br></span>
        Surname</label><input type="text" name="lastName">  
    <label for="email">
        <span id="inactiveErrorEmail"><br>Please enter your Email address<br></span>
        Email address <strong title="Required" class="required">*</strong></label>
    <input type="text" name="emailAddress">
    <input class="button" type="submit" value="Sign up" />    
</form>
<script>
    function validateForm()
    {
        var x=document.forms["signup"]["firstName"].value;
        var y=document.forms["signup"]["lastName"].value;
        var z=document.forms["signup"]["emailAddress"].value;
        var atpos=z.indexOf("@");
        var fname;
        var sname;
        var email;
        /* Validate first name */
        if (x==null || x=="")
        {
            document.getElementById("inactiveErrorFname").id = "activeErrorFname";
            fname = "true";
        }
        /* Validate Surname */
        if (y==null || y=="")
        {
            document.getElementById("inactiveErrorSname").id = "activeErrorSname";
            sname = "true";
        }
        /* Validate email */
        if (atpos<1)
        {
            document.getElementById("inactiveErrorEmail").id = "activeErrorEmail";
            email = "true";
        }
        if (fname=="true" || sname=="true" || email =="true")
        {
            return false;
        }
    }
</script>

您面临的问题是由您正在更改某些元素的 id 这一事实造成的。首次运行代码时，将成功运行以下语句：

document.getElementById("inactiveErrorFname").id = "activeErrorFname";
document.getElementById("inactiveErrorSname").id = "activeErrorSname";
document.getElementById("inactiveErrorEmail").id = "activeErroremail";

但是，第二次这些元素的 id 发生了更改，导致这些语句调用不存在的元素。这会导致 javascript 致命错误，结果没有return false。因此，您的表格将第二次按原样提交。此问题的解决方案不是更改 id，而是更改错误标签的类。您可以在此小提琴中找到示例。

.HTML：

<form action="#" method="post" name="signup" onsubmit="return validateForm()"> 
    <label for="firstname">
      <span class="inactive" id="errorFname">Please enter your first name<br></span>
      First name <strong title="Required" class="required">*</strong>
    </label><br>
    <input type="text" name="firstName"><br><br>
    <label for="surname">
      <span class="inactive" id="errorSname">Please enter your Surname<br></span>
      Surname
    </label><br>
    <input type="text" name="lastName"><br><br>
    <label for="email">
        <span class="inactive" id="errorEmail"><br>Please enter your Email address<br></span>
        Email address <strong title="Required" class="required">*</strong>
    </label><br>
    <input type="text" name="emailAddress"><br><br>
    <input class="button" type="submit" value="Sign up" />    
</form>

Javascript：

function validateForm()
{
    var x=document.forms["signup"]["firstName"].value;
    var y=document.forms["signup"]["lastName"].value;
    var z=document.forms["signup"]["emailAddress"].value;
    var atpos=z.indexOf("@");
    var fname;
    var sname;
    var email;
    /* Validate first name */
    if (x==null || x=="")
    {
        document.getElementById("errorFname").className = "active";
        fname = "true";
    }
    /* Validate Surname */
    if (y==null || y=="")
    {
        document.getElementById("errorSname").className = "active";
        sname = "true";
    }
    /* Validate email */
    if (atpos<1)
    {
        document.getElementById("errorEmail").className = "active";
        email = "true";
    }
    if (fname=="true" || sname=="true" || email =="true")
    {
        return false;
    }
    return false;
}
相关文章：