时间戳

首页 > 解决方案 > 表单验证有效，但当用户输入错误答案时仍然提交

javascript - 表单验证有效，但当用户输入错误答案时仍然提交

问题描述

在提交之前，我编写了一个 Javascript 来验证我的表单。Javascript 的功能是防止我的表单在用户提供与我的 Javascript 中的结果匹配的电话号码时自行提交，而是显示一条错误消息，显示“电话号码已使用！”

我的问题是验证工作正常：用户收到他们提供的电话号码已被使用的警报，但我的表单在显示错误消息后仍会自行提交。

我做错了什么？

下面是我的代码。

function check(form) /*function to check used phone number*/ {
    /*the following code checkes whether the entered phone number is matching*/

  if (form.phonenum.value == "0807575566464" 
|| form.phonenum.value == "09057487463") 
{
    alert("Phone number used! provide a new one! \n") /*displays error message*/
} else if (form.phonenum.value.length<11 || form.phonenum.value.length>11) { alert("Phone number should be 11 digits! \nAnd it should begin with; 080, 081, 070, 090, or 091.");
} 
else {
    return false;
  }

 
}
<form action='' method='POST' enctype="multipart/form-data" id="formName">
  <input type="text" id="phonenum" name="myinput">
  <button href='/' type='submit' onclick="check(this.form)">Submit</button>
</form>

标签： javascripthtmlformsvalidation

解决方案

您需要将函数绑定到 onsubmit 事件并在验证失败时停止该事件。

HTML：

<form action='' method='POST' enctype="multipart/form-data" id="formName" onsubmit="validateForm(event)">

JavaScript：

function validateForm(event) {
  if(validation fails...) {
    event.preventDefault();
    ....
  }
}

preventDefault 函数的文档和示例： https ://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

除了使用 event.preventDefault() 你也可以只返回 false：

https://stackoverflow.com/a/65538474/9441244

在您的情况下，您的 JavaScript 应该如下所示

HTML：

<form action='/test/' method='POST' enctype="multipart/form-data" id="formName" onsubmit="validateForm(event)">
  <input type="text" id="phonenum" name="myinput">
  <button href='/' type='submit'>Submit</button>
</form>

JavaScript：

function validateForm(event) {
    if (this.phonenum.value == "0807575566464" || this.phonenum.value == "09057487463") {
        event.preventDefault();
        alert("Phone number used! provide a new one! \n");
    } else if (this.phonenum.value.length != 11) { 
        this.preventDefault();
        alert("Phone number should be 11 digits! \nAnd it should begin with; 080, 081, 070, 090, or 091.");
    }
}

推荐阅读