JqueryValidation Фокус на неправильный ввод

Question

Я использую jqueryvalidation.org и Bootstrap.............

1- Я использовал эту команду для, заставляя пользователя заполнить #SDate_7:

$("#SDate_7").rules("add", {            
    required: true          
});

2- Это мой упрощенный HTML:

<div class="portlet-body">
    <div class="form-group">
        <label class="control-label col-md-3"></label>
        <div class="col-md-4">
            <input type="text" id="ExF_Select2_7" data-exf-id="7" class="form-control Ex_Field select2 IsInDateRange_ExF">

        </div>
        <div class="col-md-2">
            <div class="input-group date form_datetime">
                <input id="SDate_7" type="text" class="form-control Exf_DateRange_Date Exf_SDate" data-for-exf-id="7" value="" data-date-format="yyyy/mm/dd" aria-required="true">
                <span class="input-group-btn date-set">
                    <button class="btn default" type="button"><i class="fa fa-calendar"></i></button>
                </span>
            </div>
        </div>
        <label class="control-label col-md-1"> TO </label>
        <div class="col-md-2">
            <div class="input-group date form_datetime">
                <input type="text" class="form-control Exf_DateRange_Date Exf_EDate" data-for-exf-id="7" value="" data-date-format="yyyy/mm/dd">
                <span class="input-group-btn date-set">
                    <button class="btn default" type="button"><i class="fa fa-calendar"></i></button>
                </span>
            </div>
        </div>
    </div>
</div>

3- Это моя инициализация:

form.validate({
    doNotHideMessage: true, //this option enables to show the error/success messages on tab switch.
    errorElement: 'span', //default input error message container
    errorClass: 'help-block', // default input error message class
    focusInvalid: false, // do not focus the last invalid input
    //onfocusout: true,
    //ignore: "",  // validate all fields including form hidden input,
    onkeyup: false,
    rules: {      
        IdNumber: { number: true },       
    },

    errorPlacement: function (error, element) { // render error placement for each input type
        error.insertAfter(element); // for other inputs, just perform default behavior
    },

    invalidHandler: function (event, validator) { //display error alert on form submit
        success.hide();
        error.show();
        Metronic.scrollTo(error, -200);
    },

    highlight: function (element) { // hightlight error inputs
        debugger;
        //$(element)
        //    .closest('.form-group').removeClass('has-success').addClass('has-error'); // set error class to the control group

        $(element).parent().removeClass('has-success').addClass('has-error');
    },

    unhighlight: function (element) { // revert the change done by hightlight
        //$(element)
        //    .closest('.form-group').removeClass('has-error'); // set error class to the control group

        $(element).parent().removeClass('has-error'); // set error class to the control group
    },

    success: function (label) {
        if (label.attr("for") == "gender" || label.attr("for") == "payment[]") { // for checkboxes and radio buttons, no need to show OK icon
            label.closest('.form-group').removeClass('has-error').addClass('has-success');
            label.remove(); // remove error label here
        } else { // display success icon for other inputs
            label.addClass('valid') // mark the current input as valid and display OK icon
            .closest('.form-group').removeClass('has-error').addClass('has-success'); // set success class to the control group
        }
    },

    submitHandler: function (form) {
        success.show();
        error.hide();
        //add here some ajax code to submit your form or just call form.submit() if you want to submit the form without ajax
    }
});

Моя проблема заключается в следующем: проверка JQuery Сосредоточиться на неправильный элемент, как я показываю на картинке.

Как я могу решить это?