如何停止表单提交并通过JavaScript验证？

我遇到的是看起来像这样，我不能改变的一种形式：如何停止表单提交并通过JavaScript验证？

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

来源

2013-03-23 user1729506

首先将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个数字也会通过），和/或城市字段包含非空格。

您需要将zipFieldName更改为表单中zip字段的name =“...”属性中包含的名称，并且将cityFieldName作为城市字段的名称。

来源

2013-03-23 00:41:59

“首先将onsubmit属性添加到表单标记中。”我不能。我无法改变表格的html。我只能在页面的其他地方添加js。 – user1729506 2013-03-23 18:34:38

然后添加此代码以及以前的代码： – 2013-03-25 03:05:36

<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-23 01:04:23 Noogen

imo，没有jQuery的替代方案将有利于答案 – 2013-03-23 01:18:06

据我所知，jquery在整个网站上是全球可用的。使用jQuery应该可以正常工作，但如果没有，我很快就会发现。总之，我主要关心的是验证表单，而不必操纵表单的html（除了JavaScript之外 - 我不能直接编辑表单的html）。希望CMS不会妨碍。 p.s.隐藏和制作一种新形式并不是真的可行，至少在atm。表单as-is根据其精确的结构与几个js和php文件一起使用。改变它需要改变所有这些。 – user1729506 2013-03-23 21:10:06

如何停止表单提交并通过JavaScript验证？

回答

相关问题