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

希望现在还为时不晚。发生此错误的原因是您通过“突出显示”向包装器添加了类.has-error。方法，但然后立即删除它，因为你有一个有效的字段触发＆＃39; unhighlight＆＃39;方法

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

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

更新了jsfiddle

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

Answer 2

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>

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

2 个答案: