javascript - jQuery验证未触发且控制台中没有错误

我有一个带有一个字段的小型表单，我试图用它来收集邮政编码。我正在尝试使用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位于文档准备调用中，位于我的一个脚本文件中。

除非我完全弄错了，否则我的validate脚本中的Submithandler应该完全阻止表单提交（我在那里尝试解决此问题），但是表单仍然可以提交。谁能告诉我我在这里想念的东西吗？

如果要在实际页面中查看此内容，可以在http://bluspero.odysseydesignstudio.com/zip-locations上查看

最佳答案

感谢大家的帮助。我解决了问题。在整页设计中，标题中有一个邮政编码形式的版本。在此特定页面上，它具有两次表单（同一表单的2个不同版本）。事实证明，CMS缓存了标签输出，并且正在将表单ID附加到页面上的两个表单上，因此第二个表单没有触发验证，因为它没有有效的ID。一旦解决了该问题并相应地调整了jquery，它就会启动。