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

Question

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

除非我完全错误，否则我的验证脚本中的提交处理程序应该完全阻止表单提交(我在那里尝试修复此问题)，但表单仍然提交。谁能告诉我我在这里缺少什么？

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

Answer 1

谢谢大家的帮助。我解决了这个问题。在整个页面设计中，我在页眉中有一个邮政编码表单的版本。在这个特定的页面上，它有两次表单(同一表单的两个不同版本)。事实证明，CMS 缓存了标签输出，并将表单 ID 附加到页面上的两个表单，因此第二个表单没有触发验证，因为它没有有效的 ID。一旦我解决了这个问题并相应地调整了jquery，它就开始了。