Question

我遇到了一个看起来像这样的表格，我无法改变：

<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内部，它知道转发表单数据并在单击时生成结果页面。加载器函数调用只是处理添加/删除类的某些效果。

我被要求编写一个验证表单的JavaScript。有一个邮政编码字段和一个城市字段。必须填写一个或另一个。不是两个，而是一个或另一个。因此，当有人点击该按钮时，我的javascript必须停止提交，请检查这些字段，并且只有在它们好的时才前进。

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

Answer 1

首先将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字段的名称。

Answer 2

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

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

2 个答案: