顯示來自欄位上行內AJAX呼叫的驗證錯誤

當從 AJAX 呼叫回傳的驗證失敗時，我試圖在欄位（行內）上顯示錯誤訊息。

        <input type="text" class="text-danger float-right" style="border:none;font-size: smaller" id="@("errorMessage")" readonly />
        <div class="form-group">
            <label asp-for="OrderQuantity" class="control-label"></label>
            <input asp-for="OrderQuantity" id="txt" class="form-control" />
            <span asp-validation-for="OrderQuantity" class="text-danger"></span>
        </div>
        <input type="hidden" id="orderId" name="orderId" value="@Model.OrderId" />
        <button id="button">Click Me</button>
    </form>
 </div>
</div>

@section Scripts {
 <script type="text/javascript">
$("#button").click(function () {
    var orderedQuantity = $("#txt").val();
    var orderId = $("#orderId").val();
    var data = {
        orderId: orderId,
        orderedQuantity: orderedQuantity
    };

    $.ajax({
        type: 'POST',
        url: '@Url.Action("EditItem", "Orders")',
        data: data,
        dataType: "json",
        success: function (result) {
            if (result.status === "NotAvailable") {
                alert("NotAvailable");
                $("#errorMessage").val("Enter a valid Quantity");
            }
            else {
                var url = '@Url.Action("Index", "Orders")';
                window.location.href = url   "[email protected]";
            }
        },
        error: function (error) {
                alert(error);
            }
    });
});
</script>

}

表單和 AJAX 呼叫如下所示

當result.status從控制器操作回傳時， "NotAvailable"我正在創建錯誤訊息，$("#errorMessage").val("Enter a valid Quantity");并在我的欄位頂部使用它

        <input type="text" class="text-danger float-right" style="border:none;font-size: smaller" id="@("errorMessage")" readonly />

當我點擊下面的按鈕后嘗試測驗驗證失敗場景時，我看到的是

我怎樣才能回到同一個螢屏并Enter a valid Quantity在場上顯示錯誤

uj5u.com熱心網友回復：

您需要進行以下修改：

像這樣設定你的按鈕型別： <button id="button" type="button">Update</button>而不是<button id="button">Click Me</button>

注意：默認按鈕型別是提交，因此它總是發布附加表單POST請求，以便您重定向到該頁面。

輸出：

更新：雖然我認為您的errorMessage標簽看起來不錯，但我通常使用不同的 javascript 或 Jquery 標簽幻燈片，如下是供您參考的完整代碼。隨意根據您的要求進行定制。

HTML:

    <div>
        <input type="text" class="text-danger float-right" style="border:none;font-size: smaller" id="errorMessage" readonly />
        <form asp-action="EditItem">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="OrderQuantity" class="control-label"></label>
                <input asp-for="OrderQuantity" id="txt" class="form-control" />
                <span asp-validation-for="OrderQuantity" class="text-danger"></span>
            </div>
            <input type="hidden" id="orderId" name="orderId" value="123456" />
            <input type="hidden" id="inventoryorderId" name="inventoryorderId" value="22222" />
            <input type="hidden" id="inventoryId" name="inventoryId" value="3333" />
            <button id="button" type="button">Update</button>
        </form>
    </div>

Javascript:

@section Scripts {
    <script type="text/javascript">
    $("#button").click(function () {
        var orderedQuantity = $("#txt").val();
        var orderId = $("#orderId").val();
        var inventoryorderId = $("#inventoryorderId").val();
        var inventoryId = $("#inventoryId").val();
        var data = {
            orderId: orderId,
            inventoryorderId: inventoryorderId,
            inventoryId: inventoryId,
            orderedQuantity: orderedQuantity,
        };

        $.ajax({
            type: 'POST',
            url: '@Url.Action("EditItem", "Order")',
            data: data,
            dataType: "json",
            success: function (data) {
                console.log(data);

                if (data.status === "NotAvailable") {
                    alert("NotAvailable");
                    $("#errorMessage").val("Enter a valid Quantity");
                    return false;
                }
                else {
                    alert("Else fired");
                      var url = '@Url.Action("Index", "Order")';
                window.location.href = url;
                }

            },
            error: function (error) {
                alert("Alert");
            }
        });
    });
    </script>
}

希望能解決你的問題。

標籤：C＃ 阿贾克斯 asp.net核心 asp.net-core-mvc asp.net 验证器

上一篇：POST不允許使用Asp網路核心錯誤405方法

下一篇：使用影像選擇器插件上傳多張影像并在asp.net核心中使用ajax發送到控制器？