jQuery validation red border not showing immediately

Question

I'm using the jQuery validation plugin, so far so good until I found a minor problem, but it has quite an impact to the UX. Note: other form validation is working well. Here's my scripts to initiate jQuery validation

$(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>

When I click submit other forms will be validated and changed to red border, including the error message, and then here is the problem: for my birthdate form (with 3 <select> fields) when I click submit, the color doesn't immediately change to red.

but when i clicked anywhere else, the color started to change, but it highlights all of it (probably because it affects the whole .form-group)

NOTE: that problem only happen when i didn't fill the birthdate completely, but when i didn't select any of the date, the border color works well

Here is the link to the jsfiddle

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

if i need to add some more detail, please let me know, i really appreciate your help :)

Answer 1

html input validation red border in jquery

        $(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

Hope it is not too late. The error occurs because you add class .has-error to the wrapper by 'highlight' method, but then immediately remove it because you have valid field that triggers 'unhighlight' method.

Just add .has-error to immediate parent instead of the whole wrapper.

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

Updated jsfiddle

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