在字段上显示来自 AJAX 调用的验证错误

Posted 2023-03-31

【中文标题】在字段上显示来自 AJAX 调用的验证错误

【英文标题】：Show the validation error from the AJAX calls inline on the field

【发布时间】：2021-11-03 04:45:42

【问题描述】：

当 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 + "?custEmail=[e-mail]";
            
        ,
        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

【问题讨论】：

能否请您看看解决方案，我希望它会相应地解决

【参考方案1】：

您需要进行以下修改：

像这样设置你的按钮类型：<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>

希望这能解决您的问题。

【讨论】：

谢谢，但仍然没有显示错误消息。你认为我有正确的标签来显示错误吗？

能否请您发布您在上面的示例中使用的标签

我已经更新了完整的答案。希望它可以帮助您实施。

谢谢你的帮助..我正在为错误消息做id="@("errorMessage")" 所以它没有出现

应该也可以，但最好使用id="errorMessage"这种模式。很高兴为您提供帮助。