如何停止表单提交并使用javascript进行验证

How can I stop a form submit and validate with javascript?

本文关键字：javascript 验证 何停止 表单提交      更新时间：2023-09-26

我遇到了一个无法更改的表单：

<form id="mx_locator" name="mx_locator" method="post" action="search-results">
  <!-- form elements -->
  <span><input type="image" src="/images/search.png" onclick="loader()"></span>
</form>

它位于CMS内部，知道转发表单数据并在单击时生成结果页面。loader函数调用只是为了达到某种效果而处理添加/删除类。

我被要求编写一个javascript来验证表单。有一个邮政编码字段和一个城市字段。其中一个必须填写。不是两者都有，而是其中之一。因此，当有人点击该按钮时，我的javascript必须停止提交，检查这些字段，只有在它们良好的情况下才能继续。

简而言之，我该怎么做呢？最重要的是，我担心无论js做什么，表单都会被处理，因为CMS控制着它。我根本无法更改表单html。我可以添加JS。

首先将onsubmit属性添加到表单标记中。

<form id="mx_locator" onsubmit="return ziporcity(this)" name="mx_locator" ...

然后在您的文档中添加一个脚本标记，该标记包含或链接到函数ziporcity，您可以这样写：

<script>
function ziporcity(f) { return /'d{5}/.test(f['zipFieldName'].value) || /'S/.test(f['cityFieldName'].value); }
</script>

这个简单的验证函数检查其中一个或另一个或两者是否为真，zip字段是否包含5个连续数字(9个数字也可以通过(，和/或city字段是否包含非空白。

您需要将zipFieldName更改为表单中zip字段的name="…"属性中包含的名称，并将cityFieldName改为city字段的名称。

<script> 
$(document).ready(function() {
    $("#mx_locator").submit(function() {  
      var isValid = callSomeValidationFunctionThatReturnTrueFalse();
      return isValid;  // the key is return false will prevent submit
    });
});
</script>

您需要包含jQuery。如果你的表单提交事件被CMS完全淹没，这真的很奇怪，那么就隐藏起来，在它的位置创建一个新表单。

<script> 
$(document).ready(function() {
    // save old form html and hide
    var myForm = $("#mx_locator");
    var formHtml = myForm.html();
    myForm.html("").hide();
    // append new form in its place and 
    var myNewForm = $('<form id="mx_locator2" name="mx_locator2" .../></form>');
    myNewForm.html(formHtml);
    myNewForm.insertAfter(myForm);
});
</script>
相关文章：