【发布时间】：2015-08-15 20:39:26
【问题描述】：
我有一个包含一个字段的小表单，我试图用它来收集邮政编码。我正在尝试使用 Jquery Validate 来确保提交时该字段不为空，但由于某种原因，验证没有触发，并且即使该字段为空，单击提交按钮时表单也会提交。我根本没有在控制台中显示任何错误，并且表单的 id 属性和 zip 字段的 name 属性是正确的，所以我不知道原因可能是什么。
这是我的表单代码：
<form action="http://com.bluspero:8888/zip-locations" accept-charset="utf-8" method="post" id="content-zip-form">
<div style="display:none">
<input type="hidden" name="init_gmap_search" value="y" />
<input type="hidden" name="channel[]" value="locations" />
<input type="hidden" name="distance" value="" />
<input type="hidden" name="metric" value="miles" />
<input type="hidden" name="geocode_field" value="cf_location" />
<input type="hidden" name="distance_field" value="distance_max" />
<input type="hidden" name="location" value="" />
<input type="hidden" name="latitude_field" value="location_latitude" />
<input type="hidden" name="longitude_field" value="location_longitude" />
<input type="hidden" name="multiple_locations" value="" />
<input type="hidden" name="site_url" value="http://com.bluspero:8888/" />
<input type="hidden" name="required" value="" />
<input type="hidden" name="secure_return" value="" />
<input type="hidden" name="ajax_response" value="n" />
<input type="hidden" name="base_form_submit" value="1" />
<input type="hidden" name="return" value="/zip-locations" />
<input type="hidden" name="XID" value="fd052500bb584ee4f741a5670f79e61846018091" />
<input type="hidden" name="csrf_token" value="fd052500bb584ee4f741a5670f79e61846018091" />
</div>
<div class="form-inline content-section-zip-form text-center">
<p>
<label class="control-label">Enter your Zip Code</label><br>
<input type="text" class="form-control zip-field required" name="cf_location" id="cf_location">
</p>
<input type="hidden" name="distance_max" id="distance_max" value="">
<p><button class="btn btn-bluspero" type="submit" value="submit">Submit</button></p>
</div><!-- /input-group -->
</form>
这是我的脚本代码：
$('#content-zip-form').validate({
invalidHandler : function(){
$('button[type=submit]').attr('disabled',false);
},
submitHandler : function(form){
//$(form).submit();
alert('validation in place');
return false;
},
rules : {
cf_location: {required:true}
},
errorElement: 'p',
errorClass: "form-error",
errorPlacement: function(error, element) {
error.appendTo( element.parents(".content-section-zip-form"));
}
});
javascript 在文档就绪调用中，在我的一个脚本文件中。
除非我完全弄错了，否则我的验证脚本中的 submithandler 应该完全阻止表单提交（我在那里尝试解决这个问题）但表单仍然提交。谁能告诉我我在这里缺少什么？
如果你想在实际页面中看到这个，你可以在http://bluspero.odysseydesignstudio.com/zip-locations查看它
【问题讨论】：
-
我在您链接的页面上没有看到表单（几分钟前我看到过一次）
-
尝试为您调试，请注意，如果我尝试在您的表单上调用 .rules() ，则会引发错误。可能是您深入研究代码的良好起点。如果我没记错的话，它应该返回一个已经附加到表单的规则列表。
-
我已将您的代码（连同 jquery 验证代码。该死的他们没有 jsFiddle 的 HTTPS 链接）放在这个 jsFiddle 中：jsfiddle.net/tg0b35u3/1。据说效果很好。我查看了文档，您似乎在做的所有事情也都有效。我不确定网站上的其他资源可能会干扰什么，或者您是否有过时的版本（如 jQuery 或 jQuery Validation）。希望 jsFiddle 能帮助调试。
-
@aurel.g 对不起，我应该在原帖中解释。该表单与作为 cms 一部分的地图插件相关联。当您运行搜索时，它会存储一个 cookie，该 cookie 保存您的最后一次搜索以及我对页面进行编码的方式，一旦您运行搜索，它就会使用该 cookie 作为搜索参数。您可能需要以隐身模式查看页面，或者您可能需要在每次提交后转储 cookie。该 cookie 名为 gmap_last_post。
-
@Brad Decker 您用来调用规则的实际语法是什么？我在控制台中尝试了它并得到了一个错误，但我在没有验证问题的表单上也有一个错误，所以我认为我一定是输入错误。
标签： javascript jquery validation