ASP.Net MVC Ajax表单与jQuery验证 [英] ASP.Net MVC Ajax form with jQuery validation

问题描述

我有一个MVC视图，内置了与Ajax.BeginForm（）辅助方法的一种形式，而我试图验证用户输入的的 jQuery验证插件。我得到的插件以突出使用无效的输入数据的输入，但尽管无效的输入形式发送到服务器。

如何停止这一点，并确保数据被当表单验证只贴？

我的code

---

形式：

 ＆LT;字段集＆GT;
    ＆LT;传奇＆GT;留言＆LT; /传说＆GT;
        ＆LT;使用（Ajax.BeginForm（邮报％，新AjaxOptions
           {
               UpdateTargetId =GBPostList
               InsertionMode = InsertionMode.InsertBefore，
               的onSuccess =getGbPostSuccess
               OnFailure =showFaliure
           }））
           {％＆GT;
        ＆LT; D​​IV CLASS =栏的风格=宽度：230px;＆GT;
            ＆其中p为H.;
                ＆LT;标签=Post.Header＆GT;
                    Rubrik＆LT; /标签＆gt;
                ＆LT;％= Html.TextBox（Post.Header，空，新{@style =宽度：200像素;@类=所需的文本}）％＆GT;＆LT; / P＆GT;
            ＆其中p为H.;
                ＆LT;标签=Post.Post＆GT;
                    Meddelande＆LT; /标签＆gt;
                ＆LT;％= Html.TextArea（Post.Post，新{@style =宽度：230px;高度：120px;}）％＆GT;＆LT; / P＆GT;
        ＆LT; / DIV＆GT;
        ＆其中p为H.;
            ＆LT;输入类型=提交值=OK！ /＆GT;＆所述; / P＆GT;
    ＆LT; /字段集＆GT;
 

---

中的JavaScript验证：

  $（文件）。就绪（函数（）{
    //为亮点
    VAR元素= $（输入[类型='提交'！]，文本区域，选择）;
    elements.focus（函数（）{
        $（本）。家长（P）addClass（'亮点'）。
    }）;
    elements.blur（函数（）{
        $（本）。家长（P）removeClass移除（'亮点'）。
    }）;

    //进行验证
    $（形式）确认（）。
}）;
 

编辑：作为我正在downvotes出版后续问题及其答案的解决方案，这里也是工作验证方法...

 函数ajaxValidate（）{
    返回$（'表'）。验证（{
    规则：{
        Post.Header：{要求：真实}，
        Post.Post：{要求：真实，MINLENGTH：3}
    }，
    消息：{
        Post.Header：请输入一个标题
        Post.Post：{
            要求：请输入信息，
            MINLENGTH：您的信息必须是3个字符
            }
        }
    }）。形成（）;
}
 

解决方案

尝试添加一个OnBegin回调至AjaxOptions并返回$（'形式'）的值。验证（）。表（）的回调。纵观源的看来，这应该工作。

 函数ajaxValidate（）{
   返回$（'表'）验证（）的形式（）。;
}

＆LT;使用（Ajax.BeginForm（邮报％，新AjaxOptions
       {
           UpdateTargetId =GBPostList
           InsertionMode = InsertionMode.InsertBefore，
           OnBegin =ajaxValidate
           的onSuccess =getGbPostSuccess
           OnFailure =showFaliure
       }））
       {％＆GT;
 

修改更新正确的回调名字。

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.

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:

$(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();
}

解决方案

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.

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.

这篇关于ASP.Net MVC Ajax表单与jQuery验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！