0

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

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

4

2 回答 2

0

首先将 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 更改为城市字段的名称。

于 2013-03-23T00:41:59.773 回答
0 
<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>
于 2013-03-23T01:04:23.163 回答