javascript - 如果验证不正确,则在提交期间停止表单

标签 javascript html forms

我正在尝试使用 JavaScript 来验证表单,但如果表单未验证,我不希望将表单发送到“操作”页面。

验证器:

<script>
    function formSubmit()
    {
    document.getElementById("signup_form").submit();
    var x=document.forms["signup_form"]["tname"].value;
    if (x==null || x=="")
      {
      alert("First name must be filled out");
      return false;
      }
    }
</script>

表单本身:

<form action="some_file.php" method="post" id="signup_form" name="signup_form" onsubmit="return formSubmit()">

但是,如果 tname 字段为空,它将返回一个警报,但一旦用户点击“确定”,表单就会重定向到 some_file.php。我在这里错过了什么?

提交按钮:

<a href="" onclick="return formSubmit(); return false" class="purplebutton">Signup</a>

那么我错过了什么?以后如何避免这种情况?

最佳答案

您执行的语句有误。您正在验证之前提交表单。将此语句移至 if 语句下方

document.getElementById("signup_form").submit();

除此之外。您在两个地方调用 formSubmit():form 标记和 a 标记,执行一次就可以了。

更新的代码:

<html>
<head>
    <title></title>
    <script>
    function formSubmit()
    {

    var x=document.forms["signup_form"]["tname"].value;
    if (x==null || x=="")
      {
      alert("First name must be filled out");
      return false;
      }
      document.getElementById("signup_form").submit();
    }
</script>
</head>
<body>
    <form action="some_file.php" method="post" id="signup_form" name="signup_form" onsubmit="return formSubmit()">
        <input type="text" name="tname" />
        <a href="" onclick="return formSubmit(); return false" class="purplebutton">Signup</a>
</body>
</html>

DEMO

关于javascript - 如果验证不正确,则在提交期间停止表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13666519/

相关文章:

php - JavaScript 元素样式随动态 id 变化

javascript - AngularJS $animate.enter 不添加 ng-enter 和 ng-enter-active 类

javascript - 根据内部内容使 iframe 高度动态化- JQUERY/Javascript

javascript - 用不同的图表类型替换 NVD3 图表

C# Uwp应用程序web浏览器控件无法获取设备位置

c# - 通过单击按钮将值从 form1 传递到 form2

javascript - 如何编写一个 JavaScript 函数,它接受一个字符串并打印出该字符串的每个字母?

javascript - 附加节点不会触发 JavaScript 事件

javascript - Angular 生成多个 ng-repeats

database - 收集 80 个用户的数据,隐藏其他用户的数据