Form validation on tabs using jquery form validate

Question

I have 5 tabs and each of those tabs have an individual form and I am having problems with form validation.

The problem I am having is validation works on the first tab when the user presses next and no countries are selected, an error message shows up saying this field is required and the red background color shows up highlighting all the country checkboxes (ie .inputgroup.error). When the user selects a country, and presses the next button, it goes to the year tab as expected.

The next tab shows up and user presses the prev button and the country tab shows up again. However, the user has unselected all the countries and then presses next, the required error message appears, but the the red background color shows up highlighting all the country checkboxes does not.

Any reason why the red background is not working, but the error message is showing up?

<div id="tab-1-0" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
  <form id="country" class="wizardTab" novalidate="novalidate">
      <div id="q1_container_countries">
         <label for="q1_chk_1">
           <input id="q1_chk_1" type="checkbox" required="required" value="GTM" name="Country[]"> Guatemala</label>
         <label for="q1_chk_2">
           <input id="q1_chk_2" type="checkbox" value="GUY" name="Country[]">Guyana</label>
      </div>
         <input id="q1_btn_prev" class="prevBtn" type="button" value="Prev">
         <input id="q1_btn_next" class="btnNext" type="button" value="Next">
  </form>
</div>

My javascript:

$('#q1_btn_next').click(function (e) {

    var form = $("#country") ;

    if (form.valid()){

        if ($('#q1_container_countries').hasClass("error")) {

            $('#q1_container_countries').removeClass("error");

        };

        // more processing and goto next tab

    }

}

$('.wizardTab').each(function(){
    $(this).validate({
            onkeyup: false,
            onclick: false,
            onfocusout: false,
            errorClass: "error",
            errorPlacement: function (error, element) {
                error.insertBefore(element);
                $(error).parents('.inputgroup').addClass('error');
            }
            //submitHandler: function (form) {
            //    return false; //temporarily prevent full submit
            //}
        });
});

CSS:

form .inputgroup.error {
   background-color: #FFECEC;
   overflow: auto;
}

user1881482 user1881482 · Accepted Answer · 2014-02-03T21:48:31

You need to add the highlight and unhighlight options to the validate function, as well declare what classname you want to use for errors and success.

validClass : "success",
errorClass : "error",
highlight : function(element, errorClass, validClass) {
    $(element).parents('.inputgroup').addClass(errorClass).removeClass(validClass);
},
unhighlight : function(element, errorClass, validClass) {
    $(element).parents('.inputgroup').removeClass(errorClass).addClass(validClass);
}

Form validation on tabs using jquery form validate

1 Answers