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

Question

我想根据 jquery 验证插件有条件地根据元素的 blur 事件上的 ajax 响应应用错误类和验证错误消息。我得到来自 ajax 的 1 或 0 的响应。如果我在“数据”中得到0，我会显示如下验证消息，

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

但没有显示消息。而'bootbox.alert（“无效的临时GST编号”）；'正在显示警报消息。因为规则没有被申请消息。

我已经创建了如下的 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) {

            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>