必填字段验证在按钮单击 Ajax 调用时不起作用答案

【问题标题】：Required Field Validations not working on button click Ajax Call必填字段验证在按钮单击 Ajax 调用时不起作用
【发布时间】：2015-08-25 09:11:20
【问题描述】：

我有一个按钮，单击它时我对控制器执行 Ajax 调用，但所需的字段验证不适用于该调用。

以下是我的模型代码：

[Required(ErrorMessage = "*")]
public string Customer { get; set; }

[Required(ErrorMessage = "*")]
public string Phone { get; set; }

[Required(ErrorMessage = "*")]
public string Address { get; set; }

以下是我的视图代码：

@Html.TextBoxFor(m => m.Orders.Customer, new { @placeholder = "Enter Your Full Name" })
@Html.ValidationMessageFor(m => m.Orders.Customer)
@Html.TextBoxFor(m => m.Orders.Phone, new { @placeholder = "Enter Your Cell Number" })
@Html.ValidationMessageFor(m => m.Orders.Phone)
@Html.TextAreaFor(m => m.Orders.Address, new { @rows = 3, @cols = 2, @style = "width:300px;", @placeholder = "Enter Your  Complete Delivery Address" })
@Html.ValidationMessageFor(m => m.Orders.Address)
<input id="btnsubmit" type="button"  value="Submit" />

以下是我的按钮的点击事件：

$('#btnsubmit').click(function () {

var data = $('form').serialize() + '&' + $.param({ 'products': ids }, true);
var url = '@Url.Action("GetIds", "Store")';
$.post(url, data, function (r) {
    alert("Order Submitted Successfully");
});

});

我应该怎么做才能让验证工作？

【问题讨论】：

将按钮改为type="submit"，然后处理$('form').submit()函数而不是按钮.click()事件。然后您可以使用$(this).valid() 来检查表单是否有效并且不继续进行ajax 调用（并且将显示验证消息
并使用 preventDefault 停止提交：$('#formID').on("submit",function (e) { e.preventDefault(); ...
或者添加return false;作为脚本的最后一行
你的意思是重定向。如果你想重定向不要使用 ajax（它只是没有意义）做一个普通的表单提交并在 POST 方法中重定向
这很难相信。但是尝试 location.replace("/Store/Index") - 如果您打算重定向，我也同意不使用 Ajax

标签： jquery ajax asp.net-mvc razor

【解决方案1】：

确保您解析表单以便验证。

$.validator.unobtrusive.parse("#myForm");

$("#myForm").submit(function () {
    var $form = $(this);
    var isValid = $form.validate().valid();

    if (isValid === true) {
        var data = $('#myForm').serialize() + '&' + $.param({ 'products': ids }, true);
        var url = '@Url.Action("GetIds", "Store")';

        $.post(url, data, function (r) {
            alert("Order Submitted Successfully");
        });
    }
});

【讨论】：

$.validator.unobtrusive.parse("#myForm"); 没有意义（表单已经被解析），它应该只是var isValid = $form.valid();，最后你需要return false; 以防止默认提交

【解决方案2】：

客户端验证默认关闭。确保通过 web.config 启用它：

<configuration>
<appSettings>
    <add key="ClientValidationEnabled" value="true"/>
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>
</configuration>

UnobtrusiveJavaScriptEnabled 也应该打开。

【讨论】：