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

Question

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

表格代码:

@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 用户将同一问题标记为重复问题，并且该问题与他所说的重复问题不同，但这并不能解决该问题。我尝试了评论中的所有解决方案，但它们对我不起作用。

Answer 1

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

1) jQuery Validation 插件初始化错误(@Sparky 在评论中指出)

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

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

参见https://jsfiddle.net/eky1rgjb/

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

第二)当 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/