jQuery验证红色边框没有立即显示

Question

我正在使用 jQuery 验证插件，到目前为止一切顺利，直到我发现了一个小问题，但它对 UX 有很大影响。注意：其他表单验证运行良好。这是我启动 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

jquery中的html输入验证红色边框

        $(document).ready(function () {
            $("#btnSubmit").on("click", function (e) {
                try {
                    debugger;
                    if (InputsValidate()) {
                        alert("Success");
                    }
                    else
                        alert("error");
                }
                catch (e) { alert(e); }
            });

            function InputsValidate() {
                try {
                    var val = 0;
                    $('#AcGrpID').find('input').each(function () {
                        if ($(this).prop('required')) {
                            if ($(this).val() == '') {
                                $(this).css('border', 'solid 2px red');
                                val++;
                            } else {
                                $(this).css('border', 'solid 2px green');
                                val = 0;
                            }
                        }
                    });
                    if (val == 0) {
                        return true;
                    } else { return false; }
                }
                catch (e) { alert(e); }
            }
            //Set required filed As Red Border
            $('#AcGrpID').find('input').each(function () {
                try {
                    if ($(this).prop('required')) {
                        if ($(this).val() == '') {
                            $(this).css('border', 'solid 2px red');
                        } else {
                            $(this).css('border', 'solid 2px green');
                        }
                    }
                }
                catch (e) { alert(e); }
            });
            //Check required field is non  empty
            $('#AcGrpID').on("focusout", "input", function () {
                if ($(this).prop('required')) {
                    if ($(this).val() == '') {
                        $(this).css('border', 'solid 2px red');
                    } else {
                        $(this).css('border', 'solid 2px green');
                    }
                }
            }).trigger("focusout");
        });

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    </head>
<body>
    <div id="AcGrpID">
        <input class="form-control" id="txtAccountGroup" type="text" required><br />
        <input class="form-control" id="txtShortCode"><br />
        <input class="form-control" id="txtOthers" type="text"><br />
        <input class="form-control" id="txtPayDetails" type="text" required><br />
        <input class="form-control" id="txtDel" type="text" required><br />
        <button type="button" id="btnSubmit" class="btn btn-primary">Submit</button>
    </div>
</body>
</html>

Answer 2

希望还为时不晚。 发生错误是因为您通过 '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/