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;
        }

验证图像

我需要显示各个经过验证的字段的消息。

重要：堆栈溢出用户将同一问题标记为重复，但该问题与他所说的重复问题不同，无法解决该问题。我尝试了所有评论的解决方案，但它们对我没有用。

Answer 1

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

1）jQuery Validation插件的初始化错误（在评论中由@Sparky指出）

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

<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/

显示消息到使用Ajax.BeginForm Asp.Net MVC进行jquery验证

1 个答案: