ASP.Net MVC Ajax 폼과 jQuery 검증

ASP.Net MVC Ajax 폼과 jQuery 검증

나는 Ajax로 작성된 폼을 가진 MVC 뷰를 가지고 있다.BeginForm() 도우미 메서드로 jQuery Validation 플러그인을 사용하여 사용자 입력을 검증하려고 합니다.잘못된 입력 데이터로 입력을 강조 표시하는 플러그인이 있지만 잘못된 입력에도 불구하고 양식이 서버에 게시됩니다.

이를 중지하고 양식이 검증될 때만 데이터가 게시되도록 하려면 어떻게 해야 합니까?

내 코드

---

폼:

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

편집: 폴로업 문제와 그 해결 방법을 답변으로 공개하기 위해 투표한 결과, 여기에도 검증 방법이 있습니다.

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

OnBegin 콜백을 AjaxOptions에 추가하여 $('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가 올바른 콜백 이름으로 업데이트되었습니다.

언급URL : https://stackoverflow.com/questions/298691/asp-net-mvc-ajax-form-with-jquery-validation