javascript - jQuery 验证红色边框未立即显示

Question

我正在使用 jQuery 验证插件，到目前为止一直很好，直到我发现一个小问题，但它对用户体验有很大影响。注意:其他表单验证运行良好。这是我启动 jQuery 验证的脚本

$(document).ready(function() {
    //jquery validation plugin
    $('#user-register-form').validate({
        rules: {
            fullname: {
                minlength: 3,
                required: true
            },
            email:{
                email:true
            },
            password: {
                minlength: 8,
                required: true
            },
            bornday:{
                required:true
            },
            bornmonth:{
                required:true
            },
            bornyear:{
                required:true
            }
        },
        highlight: function(element) {
            $(element).parents('.form-group').addClass('has-error');
        },
        unhighlight: function(element) {
            $(element).parents('.form-group').removeClass('has-error');
        },
        errorElement: 'span',
        errorClass: 'validation-error-message help-block form-helper bold',
        errorPlacement: function(error, element) {
            if(element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        }
    });
}); //end of document ready

<div class="form-group">
    <label class="col-xs-12 col-sm-4 control-label" for="bornday">
        Tanggal Lahir
        <span class="text-red">*</span>
    </label>
    <div class="col-sm-8">
        <div class="row">
            <div class="col-md-3 col-sm-3 col-xs-4">
                <select name="bornday" class="form-control input-w" required>
                    <option value="">Tanggal</option>
                    <?php for($i = 1; $i <= 31; $i++) { 
                        $selected = $register_data['bornday'] == $i ? 'selected' : ''; 
                        $tgl = $i < 10 ? '0'.$i : $i; echo '<option value="'.$tgl. '" '.$selected. '>'.$i. '</option>'; 
                    } ?>
                </select>
            </div>
            <div class="col-md-3 col-sm-3 col-xs-4">
                <select name="bornmonth" class="form-control input-w" required>
                    <option value="">Bulan</option>
                    <?php foreach($month as $k => $v) { 
                        $selected = $register_data['bornmonth'] == $k ? 'selected' : ''; echo '
          <option value="'.$k.'" '.$selected.'>'.$v.'</option>'; 
                    } ?>
                </select>
            </div>
            <div class="col-md-3 col-sm-3 col-xs-4">
                <select name="bornyear" class="form-control input-w" required>
                    <option value="">Tahun</option>
                    <?php 
                        $start_year = date('Y') - 75; 
                        $end_year = date('Y') - 10; 
                        for($y = $start_year; $y <= $end_year; $y++) { 
                            $selected = $register_data['bornyear'] == $y ? 'selected' : ''; 
                            echo '<option value="'.$y. '" '.$selected. '>'.$y. '</option>'; 
                        } ?>
                    </select>
                </div>
            </div>
        </div>

当我点击提交时，其他表单将被验证并更改为红色边框，包括错误消息，然后这里是问题所在:对于我的生日表格(有 3 个 <select> 字段)，当我点击提交时，颜色不会立即变为红色。

但是当我点击其他地方时，颜色开始改变，但它突出显示了所有颜色(可能是因为它影响了整个 .form-group)

注意:只有当我没有完全填写生日时才会出现这个问题，但是当我没有选择任何日期时，边框颜色效果很好

这是 jsfiddle 的链接

https://jsfiddle.net/d7bhax8q/1/

如果我需要添加更多细节，请告诉我，非常感谢您的帮助:)

Answer 1

希望还不算太晚。发生错误是因为您通过“highlight”方法将类 .has-error 添加到包装器，但随后立即将其删除，因为您有触发“unhighlight”方法的有效字段。

只需将 .has-error 添加到直接父级而不是整个包装器。

  highlight: function(element) {
    $(element).parent().addClass('has-error');
  },
  unhighlight: function(element) {
    $(element).parent().removeClass('has-error');
  },

更新的 jsfiddle

https://jsfiddle.net/d7bhax8q/2/