Question

我有5个标签，每个标签都有一个单独的表单，我遇到表单验证问题。

我遇到的问题是，当用户按下下一步并且没有选择任何国家/地区时，第一个选项卡上的验证工作正常，会显示一条错误消息，说明此字段是必填项，并且红色背景颜色显示突出显示所有国家/地区复选框（即.inputgroup.error）。当用户选择一个国家/地区并按下下一个按钮时，它会按预期进入年份选项卡。

显示下一个标签，用户按下prev按钮，再次显示国家/地区标签。但是，用户取消选中所有国家/地区然后按下，将显示所需的错误消息，但红色背景颜色会突出显示所有国家/地区复选框。

红色背景无法正常工作但出现错误信息的原因是什么？

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

我的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;
}

Answer 1

您需要将highlight和unhighlight选项添加到validate函数，并声明要用于错误和成功的类名。

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);
}

使用jquery表单验证对选项卡进行表单验证

1 个答案: