加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 编程开发 > asp.Net > 正文

ASP.Net MVC Ajax形式与jQuery验证

发布时间:2020-12-15 19:09:36 所属栏目:asp.Net 来源:网络整理
导读:我有一个MVC视图与使用Ajax.BeginForm()辅助方法构建的表单,我试图验证用户输入与 jQuery Validation plugin.我得到插件突出显示输入与无效的输入数据,但尽管无效的输入表单发布到服务器。 如何停止此操作,并确保数据仅在表单验证时发布? 我的代码 表格
我有一个MVC视图与使用Ajax.BeginForm()辅助方法构建的表单,我试图验证用户输入与 jQuery Validation plugin.我得到插件突出显示输入与无效的输入数据,但尽管无效的输入表单发布到服务器。

如何停止此操作,并确保数据仅在表单验证时发布?

我的代码

表格:

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

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

编辑:当我得到downvote出版后续问题和他们的解答在答案,这里也是工作验证方法…

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

解决方法

尝试向AjaxOptions添加一个OnBegin回调,并从回调中返回$(‘form’)。validate()。form()的值。看看 source它似乎这应该工作。
function ajaxValidate() {
   return $('form').validate().form();
}

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

EDIT已更新为正确的回调名称。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读