Question

我想根据jquery验证插件有条件地根据元素blur事件的ajax响应来应用错误类和验证错误消息。我从ajax得到1或0的回复。如果我在“数据”中获得0我已经将验证消息显示为吼叫，

  $("#txtFinalGSTNo").rules("add", {
                    messages: "Invalid Provisional GST Number"
                });

但未显示消息。而＆＃39; bootbox.alert（＆＃34;无效的临时GST编号＆＃34;）;＆＃39;正在显示警报消息。因为规则不适用于消息。

我已经将jquery创建为bellow，并添加错误消息以显示。

$(".gstFild").blur(function () {

    var txtPanNo = $("#txtCompanyPanNo").val();
    var txtGstNo = "";

    if ($("#ddlCountry").val() == 180 && $("#CheckboxGST").prop("checked") == true) {
        if ($("#hiddenProType").val() == "1") {
            txtGstNo = $("#txtProvisionalGSTNo").val();
        }
        else if ($("#hiddenProType").val() == "2") {
            txtGstNo = $("#txtFinalGSTNo").val();
        }

    }

    $.ajax({
        type: "POST",
        url: "@Url.Action("CheckGSTValidate", "StaticPage")",
        data: { SelectedStateValue: $("#ddlState").val(), txtPanNo: txtPanNo, txtGstNo: txtGstNo },
        success: function (data) {

            if (data == 0) {
                if ($("#hiddenProType").val() == "1") {

                    $("#txtFinalGSTNo").rules("add", {
                        messages: "Invalid Provisional GST Number"
                    });

                    //bootbox.alert("Invalid Provisional GST Number");

                }
                else if ($("#hiddenProType").val() == "2") {


                    $("#txtFinalGSTNo").rules("add", {
                        messages: "Invalid Final GST Number"
                    });

                    //bootbox.alert("Invalid Final GST Number");

                }
            }
            else {

                if ($("#hiddenProType").val() == "1") {
                    $("#txtProvisionalGSTNo").rules("remove", "messages");
                }
                else if ($("#hiddenProType").val() == "2") {
                    $("#txtFinalGSTNo").rules("remove", "messages");
                }



            }
        }
    });

});

html代码块如下所示，

   <div class="three-column-form">
                                <div class="business-details-row">
                                    <div class="left-column">
                                        <div class="chkbox-wrap">
                                            <input id="CheckboxGST" type="checkbox" name="IsGstApplicabler" disabled="disabled">
                                            <label class="indeschead" for="CheckboxGST">GST APPLICABLE</label>
                                        </div>
                                    </div>
                                    <div class="left-column margin">
                                        @if (ViewBag.GstProStatus == 1)
                                        {
                                            <div class="form-row">
                                                <label><span>*</span>Provisional GST no.</label>
                                                <input type="text" class="gstFild" id="txtProvisionalGSTNo" disabled="disabled" name="ProvisionalGSTNo" data-validation="required">
                                            </div>
                                        }
                                        else
                                        {
                                            <div class="form-row">
                                                <label><span>*</span>Final GST no.</label>
                                                <input type="text" class="gstFild" id="txtFinalGSTNo" disabled="disabled" name="FinalGSTNo" data-validation="required">
                                            </div>
                                        }

                                    </div>
                                    <input type="hidden" name="hiddenProvisopnalTp" id="hiddenProType" value="@ViewBag.GstProStatus" />
                                </div>
                            </div>

Answer 1

“但未显示消息”

您没有正确使用the .rules() method，因为该消息未分配给任何规则。

$("#txtFinalGSTNo").rules("add", {
    messages: "Invalid Provisional GST Number"  // <- which rule??
});

为了动态更改消息，您需要在messages对象中指定适用的规则。

$("#txtFinalGSTNo").rules("add", {
    messages: {
        required: "custom required message here"
    }
});

您可以通过再次在上面调用此方法来动态更改此消息，但是会添加新消息。

演示：jsfiddle.net/a4zbp7dh/

Answer 2

根据url的回复显示错误消息，下方添加了额外的跨度ID txtProvisionalGSTNo_msg和txtFinalGSTNo_msg来显示消息。

<强> jquery的

$(".gstFild").blur(function () {

    var txtPanNo = $("#txtCompanyPanNo").val();
    var txtGstNo = "";

    if ($("#ddlCountry").val() == 180 && $("#CheckboxGST").prop("checked") == true) {
        if ($("#hiddenProType").val() == "1") {
            txtGstNo = $("#txtProvisionalGSTNo").val();
        }
        else if ($("#hiddenProType").val() == "2") {
            txtGstNo = $("#txtFinalGSTNo").val();
        }

    }

    $.ajax({
        type: "POST",
        url: "@Url.Action("CheckGSTValidate", "StaticPage")",
        data: { SelectedStateValue: $("#ddlState").val(), txtPanNo: txtPanNo, txtGstNo: txtGstNo },
        success: function (data) {

            $("#txtProvisionalGSTNo_msg").html("");
            $("#txtFinalGSTNo_msg").html("");

            if (data == 0) {
                if ($("#hiddenProType").val() == "1") {

                    $("#txtProvisionalGSTNo_msg").html("Invalid Provisional GST Number");

                    //bootbox.alert("Invalid Provisional GST Number");

                }
                else if ($("#hiddenProType").val() == "2") {


                    $("#txtFinalGSTNo_msg").html("Invalid Final GST Number");

                    //bootbox.alert("Invalid Final GST Number");

                }
            }
        }
    });

});

html阻止

<div class="three-column-form">
<div class="business-details-row">
    <div class="left-column">
        <div class="chkbox-wrap">
            <input id="CheckboxGST" type="checkbox" name="IsGstApplicabler" disabled="disabled">
            <label class="indeschead" for="CheckboxGST">GST APPLICABLE</label>
        </div>
    </div>
    <div class="left-column margin">
        @if (ViewBag.GstProStatus == 1)
        {
            <div class="form-row">
                <label><span>*</span>Provisional GST no.</label>
                <input type="text" class="gstFild" id="txtProvisionalGSTNo" disabled="disabled" name="ProvisionalGSTNo" data-validation="required">
                <span id="txtProvisionalGSTNo_msg"></span>
            </div>
        }
        else
        {
            <div class="form-row">
                <label><span>*</span>Final GST no.</label>
                <input type="text" class="gstFild" id="txtFinalGSTNo" disabled="disabled" name="FinalGSTNo" data-validation="required">
                <span id="txtFinalGSTNo_msg"></span>
            </div>
        }

    </div>
    <input type="hidden" name="hiddenProvisopnalTp" id="hiddenProType" value="@ViewBag.GstProStatus" />
</div>
</div>

如何根据ajax响应jquery验证有条件地显示错误消息？

2 个答案: