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

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

Jquery验证没有在控制台

1 个答案: