使用 Ajax.BeginForm Asp.Net MVC 向 jquery 验证显示消息

Question

我已经使用 asp.net mvc 中的 Ajax.BeginForm 测试了 jquery validate，虽然表单验证，如果表单无效，则不会显示错误消息。

表格代码：

@using (Ajax.BeginForm("Save", "Student", null,
    new AjaxOptions { HttpMethod = "POST", OnSuccess = "StudentSucess", OnFailure = "StudentFail", OnBegin = "validateForm", },
    new { id = "form-student" }))
{
    <div class="form-group">
        <input type="hidden" class="form-control" id="Id" name="Id" />
    </div>
    <div class="form-group">
        <label>TESTE</label>
        <select name="Test" required="" class="form-control">
            <option value="">Select</option>
            <option value="1">A</option>
            <option value="2">B</option>
            <option value="3">C</option>
        </select>
    </div>
    <div class="form-group">
        <input type="text" class="form-control" id="Name" name="Name" placeholder="Name" autocomplete="off" required="" />
    </div>
    <div class="form-group m-t-10">
        <button type="submit" class="btn btn-theme">Create</button>
    </div>
}

验证功能代码

function validateForm() {
            var valid = $("#form-student").validate({
                rules: {
                    Name: {
                        required: true
                    },
                    Test: {
                        required: true
                    },
                },
                messages: {
                    Name: {
                        required: "Your name is required"
                    },
                    Test: {
                        required: "Test is required"
                    },
                }
            });

            return valid;
        }

验证图片

我需要显示相应验证字段的消息。

重要提示：stackoverflow 用户将同一个问题标记为重复问题，并且该问题与他所说的重复问题不同，不能解决该问题。我尝试了 cmets 的所有解决方案，但它们都不适合我。

Answer 1

OP的代码有两个问题，我将分别指出。

1) jQuery Validation 插件初始化错误（由 cmets 中的@Sparky 指出）

jQuery Validation 插件的推荐用法是在页面加载后调用 .validate 函数，而不是使用 onsubmit 事件处理程序。

<form id="myForm">
<input type="text" required="required">
</form>
<script>
$(document).ready(function() {
    $("#myform").validate();
});
</script>

见https://jsfiddle.net/eky1rgjb/

这是我个人推荐的解决方案。

2nd) 当 HTML5 验证失败时，事件处理程序“onsubmit”不会触发。

这是一个更通用的解决方案。如果您希望使用 onsubmit 事件处理程序触发您的（自定义）验证，您需要知道只有在没有阻止提交的 HTML5 验证时才会调用该函数。

<b>This form WON'T fire the validation</b>
<form onsubmit='alert("validation")'>
    <input name="foo" type="text" required="">
    <br />
    <input type="submit" />
</form>
<b>This form WILL fire the validation, see the missing required=""</b>
<form onsubmit='alert("validation")'>
    <input name="foo" type="text">
    <br />
    <input type="submit" />
</form>

见https://jsfiddle.net/0v253wz6/2/