Question

目前正在使用jquery组字段验证。我正在使用我搜索过的优秀jquery验证插件实际上我对我的当前代码进行了组验证有一些想法我可以验证三个字段，当我输入任何字段时，errClass消失但验证计数没有发现。

我无法弄清楚问题是什么

这是jquery代码

$(document).ready(function () {   
$(".error_msge").hide();
  $(".basicForm").validate({
   ignore: false,
     onkeyup: false,
        showErrors: function (errorMap, errorList) {
        var errors = this.numberOfInvalids();

        if (errors) {
            var message = errors == 1 ? 'You missed 1 field. It has been highlighted' : 'You have missed ' + errors + ' fields. Please fill the highlited field before submit.';
            $("#error_message").html(message);
            $(".error_msge").show();
        } else {
            $(".error_msge").hide();
        }
        this.defaultShowErrors();
    },
    errorPlacement: function () {
        return false;
    },
    highlight: function (element) {

        if ($(element).is(':radio'))  {

        } else {
            $(element).addClass('errRed');
        }
        $(element).prevAll('label').find('span.required-star').addClass('text-error-red').removeClass('text-error-black');            
    },
    unhighlight: function (element) {

        if ($(element).is(':radio')) {
        } else {
            $(element).removeClass('errRed');
        }
        $(element).prevAll('label').find('span.required-star').addClass('text-error-black').removeClass('text-error-red');

    },

    rules: {
        txt_Po: {
              require_from_group: [1, ".txt_Add"]
            },
            txt_Bdg: {
              require_from_group: [1, ".txt_Add"]
            },
            txt_St: {
              require_from_group: [1, ".txt_Add"]
            }

    }
});
});

这是我的HTML代码

<span id="error_message" class="error_msge">

            </span>
<form autocomplete="off" class="basicForm" id="basicForm" method="POST">
<!--first field-->
<label>P.O.Box</label>
                      <br/>
                      <input type="text" class="ipt_Field txt_Add" id="txt_Po" name="txt_Po" />
    <!--second field-->
 <label>Building</label>
                      <br/>
                      <input type="text" class="ipt_Field txt_Add" id="txt_Bdg" name="txt_Bdg" />
    <!--third field-->
<label>Street</label>
                      <br/>
                      <input type="text" class="ipt_Field txt_Add" id="txt_St" name="txt_St" />
<button class="btn-next" id="btn-Next" >Next</button>
</form>

这是CSS代码

.errRed {
color: black !important;
border: 1px solid #EA373D !important;
padding: 6px !important;
}
.error_msge {
    border:1px solid red;
    width: 450px;
    margin: 0px auto;
    text-align: center;
    background-color: #FFBABA!important;
    padding: 5px;
 }

提前致谢

使用jquery验证器进行文本字段组验证

0 个答案: