Question

我有一个包含两个文本输入和一个选择字段的表单。我正在使用带有jQuery .validate插件的bootstrap。我能够执行标准表单验证。但是，我的表单不会立即验证以下选择。文本字段工作正常，但我选择后我的选择字段不会验证。它仅在我单击或跳出字段后验证。我怎样才能解决这个问题？

以下是截图：

enter image description here

这是我的代码：

<form class="form-inline" role="form" id="addressForm" name="addressForm">
  <legend>Search Your Property Here</legend>
    <div class="form-group">
      <label for="streetAddress" class="control-label">Street Address</label>
      <input type="text" class="form-control" id="streetAddress" name="streetAddress" placeholder="Street Address">
    </div>
    <div class="form-group">
      <label for="city" class="control-label">City</label>
      <input class="form-control" type="text" id="city" name="city" placeholder="City">
    </div>
    <div class="form-group">
      <label for="state" class="control-label">State</label>
      <select name="state" class="form-control" id="state" name="state" required="required"> 
        <option value="" selected="selected" hidden="hidden"></option> 
        <option value="AL">AL</option> 
        <option value="AK">AK</option> 
        <option value="AZ">AZ</option> 
      </select>
    </div>
    <button type="submit" name="submitBtn" id="submitBtn" class="btn btn-primary btn-large">Search</button>
</form>

这是我的验证功能：

        $(document).ready(function(){
            $('#addressForm').validate({
                rules: {
                    streetAddress: {
                        required: true
                    },
                    city: {
                        required: true
                    },
                    state: {
                        required: true
                    },
                },
                highlight: function(element) {
                    $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
                },
                success: function(element) {
                    $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
                }
            });
        });

以下是我添加的脚本：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/additional-methods.min.js"></script>
    <script>

Answer 1

您发布的代码工作正常。单击按钮以触发消息。一旦从下拉列表中进行选择，错误消息就会清除。

DEMO：http://jsfiddle.net/zgw2s8a8/

即使安装了BootStrap，我也无法重现您的问题......

DEMO 2：http://jsfiddle.net/zgw2s8a8/3/

但是，我怀疑您的特定问题（我们看不到的问题）是由success回调代替unhighlight回调函数的不当使用造成的。

highlight: function(element) {
    $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
},
unhighlight: function(element) { // <- do not use 'success' for this
    $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
}

更新了DEMO：http://jsfiddle.net/zgw2s8a8/2/

success回调主要用于操作有效元素上的消息标签，例如添加绿色复选标记。（因为默认情况下，消息标签隐藏在有效元素上）。不幸的是，许多在线演示和教程都显示success被用于unhighlight更合适的地方。

如果您使用highlight回调函数覆盖默认行为，那么您还应该使用unhighlight回调函数执行相反的操作。

更具体地说，您的代码只会覆盖内置的highlight函数，而内置的unhighlight函数就位......所以这些类没有完全添加/删除按照设计。

使用您在最新编辑中引用的相同文件版本，它仍在使用...

http://jsfiddle.net/zgw2s8a8/5/

选择选项时表单不验证，直到使用bootstrap / jquery表单验证单击或跳出选择字段

1 个答案: