ASP。Net MVC Ajax表单和jQuery验证。

I have an MVC view with a form built with the Ajax.BeginForm() helper method, and I'm trying to validate user input with the jQuery Validation plugin. I get the plugin to highlight the inputs with invalid input data, but despite the invalid input the form is posted to the server.

我有一个用Ajax.BeginForm() helper方法构建的MVC视图，我正在尝试使用jQuery验证插件验证用户输入。我让插件突出显示输入无效的输入数据，但是尽管输入无效，表单还是被发送到服务器。

How do I stop this, and make sure that the data is only posted when the form validates?

如何停止此操作，并确保只有在表单验证时才发布数据?

My code

我的代码

The form:

形式:

<fieldset>
    <legend>leave a message</legend>
        <% using (Ajax.BeginForm("Post", new AjaxOptions
           {
               UpdateTargetId = "GBPostList",
               InsertionMode = InsertionMode.InsertBefore,
               OnSuccess = "getGbPostSuccess",
               OnFailure = "showFaliure"
           }))
           { %>
        <div class="column" style="width: 230px;">
            <p>
                <label for="Post.Header">
                    Rubrik</label>
                <%= Html.TextBox("Post.Header", null, new { @style = "width: 200px;", @class="text required" }) %></p>
            <p>
                <label for="Post.Post">
                    Meddelande</label>
                <%= Html.TextArea("Post.Post", new { @style = "width: 230px; height: 120px;" }) %></p>
        </div>
        <p>
            <input type="submit" value="OK!" /></p>
    </fieldset>

The JavaScript validation:

JavaScript验证:

$(document).ready(function() {
    // for highlight
    var elements = $("input[type!='submit'], textarea, select");
    elements.focus(function() {
        $(this).parents('p').addClass('highlight');
    });
    elements.blur(function() {
        $(this).parents('p').removeClass('highlight');
    });

    // for validation
    $("form").validate();   
});

EDIT: As I was getting downvotes for publishing follow-up problems and their solutions in answers, here is also the working validate method...

编辑:当我发布后续问题和他们的解决方案时，这里还有一个有效的验证方法……

function ajaxValidate() {
    return $('form').validate({
    rules: {
        "Post.Header": { required: true },
        "Post.Post": { required: true, minlength: 3 }
    },
    messages: {
        "Post.Header": "Please enter a header",
        "Post.Post": {
            required: "Please enter a message",
            minlength: "Your message must be 3 characters long"
            }
        }
    }).form();
}

1 个解决方案

#1

Try adding an OnBegin callback to the AjaxOptions and return the value of $('form').validate().form() from the callback. Looking at the source it appears that this should work.

尝试向AjaxOptions添加一个OnBegin回调，并从回调返回$('form').validate().form()。从源代码来看，这似乎是可行的。

function ajaxValidate() {
   return $('form').validate().form();
}

<% using (Ajax.BeginForm("Post", new AjaxOptions
       {
           UpdateTargetId = "GBPostList",
           InsertionMode = InsertionMode.InsertBefore,
           OnBegin = "ajaxValidate",
           OnSuccess = "getGbPostSuccess",
           OnFailure = "showFaliure"
       }))
       { %>

EDIT updated with correct callback name.

使用正确的回调名编辑更新。

#1