ajax 게시물에 대해 수동으로 MVC 3 클라이언트 측 유효성 검사 호출

ajax 게시물에 대해 수동으로 MVC 3 클라이언트 측 유효성 검사 호출

---

MVC 3 웹 응용 프로그램을 만들고 있습니다. 엔터티 클래스에서 데이터 주석을 사용하고 서버에 다시 게시하기 전에 눈에 띄지 않는 클라이언트 측 유효성 검사를 사용하고 싶습니다. 이것은 일반 게시물을 작성할 때 잘 작동합니다. 필드가 유효하지 않은 경우 유효성 검사 및 유효성 검사 요약을받습니다. 그러나 ajax와 json을 통해 정보를 다시 게시하고 싶습니다. 먼저 클라이언트 측에서 양식을 '수동'으로 확인한 다음 서버에 ajax 게시물을 다시 만들 수 있습니다. 아래는 내 코드의 요약 버전입니다.

  public class Customer
    {
        [Required(ErrorMessage = "The customer's first name is required.")]
        public string FirstName { get; set; }

        [Required(ErrorMessage = "The customer's last name is required.")]
        public string LastName { get; set; }
    }



    <% using (Html.BeginForm()) { %>

    <%: Html.LabelFor(model => model.FirstName, "First Name")%>
    <%: Html.TextBoxFor(model => model.FirstName, new { @class = "TextBox", id = "Customer.FirstName" })%>
    <%: Html.ValidationMessageFor(model => model.FirstName, "*")%>

    <%: Html.LabelFor(model => model.LastName, "Last Name")%>
    <%: Html.TextBoxFor(model => model.LastName, new { @class = "TextBox", id = "Customer.LastName" })%>
    <%: Html.ValidationMessageFor(model => model.LastName, "*")%>

    <div id="CustomerEditSave" class="Button CustomerEditButtons" style="margin-right:40px;">
       <a href="#">Save</a>
    </div>

    <%: Html.ValidationSummary(true) %>

    <% } %>

이 코드를 시도했지만 이름 만 확인하고 유효성 검사 요약을 표시하지 않습니다.

    $("#CustomerEditSave").click(function () {
        $(form).validate();
        //Ajax call here
    });

---

시험:

//using the form as the jQuery selector (recommended)
$('form').submit(function(evt) {
    evt.preventDefault();
    var $form = $(this);
    if($form.valid()) {
        //Ajax call here
    }
});

//using the click event on the submit button
$('#buttonId').click(function(evt) {
    evt.preventDefault();
    var $form = $('form');
    if($form.valid()) {
        //Ajax call here
    }
});

이것은 jQuery ajax 및 MSAjax 호출에서 작동합니다. http://nuget.org/packages/TakeCommand.js 또는 https://github.com/webadvanced/takeCommand를 사용해 볼 수도 있습니다. 자동으로 처리됩니다.

---

나는 며칠 동안 MVC 클라이언트 측 유효성 검사에 대해 phaffing했습니다.

.click 사용 안함 .submit :

$("#MyForm").on('submit',function () {

    if($("#MyForm").valid())
    {
        //Do ajax stuff
    }

    //Return false regardless of validation to stop form submitting
    //prior to ajax doing its thing
    return false;
});

여기에 업데이트를 추가하고 false를 반환하는 대신 이벤트를 취소하는 것이 좋습니다 (또는 둘 다 수행).

$("#MyForm").on('submit',function (e) {

    if($("#MyForm").valid())
    {
        //Do ajax stuff
    }

    e.preventDefault();

    //Return false regardless of validation to stop form submitting
    //prior to ajax doing its thing
    return false;
});

---

적어도 제 경우에는 (MVC 5) 다음 코드를 추가해야했습니다. 그렇지 않으면 .valid()항상 true를 반환합니다.

$(function () {
$(document).ajaxComplete(function(event, request, settings){
    //re-parse the DOM after Ajax to enable client validation for any new form fields that have it enabled
    $.validator.unobtrusive.parse(document);
});

});

http://johnculviner.com/the-unobtrusive-libraries-client-validation-on-ajax-in-asp-net-mvc-3/ 참조

---

중대한!!:

Paul의 해결책은 Dr Rob이 아니라 질문에 대한 정답입니다.

Although you can just use valid() instead of validate().form().

But more importantly, there really is no reason to restrict your code as suggested by Dr Rob, ie, not .click and only use .submit. That isn't what solved the problem! What solved the problem was wrapping the $.ajax(...) call in the if statement. Ie:

if($("#MyForm").valid())
{
    //call to $.ajax or equivalent goes in here.
}

I think that needs clarifying as otherwise the real answer to the problem is obfuscated.

---

$(YourForm).data('unobtrusiveValidation').validate()

---

        if(!$('#myform').data('unobtrusiveValidation').validate())
        {
           // add your extra custom logic
        } 
        else
        { 
             $('#myform').submit(); 
        }

It triggers the validation and returns a boolean, so you can check before submit.

---

.Valid() works. i.e it tells you whether your form is valid. However alone it does not help to show AND hide messages correctly. here's my manual validation method

function validate()
        {
            //valid() not only tells us whether the form is valid but 
            //also ensures that errors are shown !!!
            if ($("form").valid())
            {
                //if the form is valid we may need to hide previously displayed messages
                $(".validation-summary-errors").css("display", "none");
                $(".input-validation-error").removeClass("input-validation-error");
                return true;
            }
            else
            {
                //the form is not valide and because we are doing this all manually we also have to
                //show the validation summary manually 
                $(".validation-summary-errors").css("display", "block");
                return false;
            }
        }

---

I tried all of the above solutions but none worked on MVC5. 

I am using jQuery v2.1.4 and jQuery.Validation v1.11.1. I need to trigger validation while on page render. Only below one worked for me.

$(document).ready(function () {
   ...
   validateForm();
}

function validateForm() {`enter code here`
    var elem = document.getElementById('btnSave');
    elem.click();    
}

$('#btnSave').click(function (evt) {
    //evt.preventDefault();
    var form = $('form');
    if (form.valid()) {
        //Ajax call here
    }
    //$(".validation-summary-errors").css("display", "block");
});

function Validate() {
    // If no group name provided the whole page gets validated
    Page_ClientValidate();
}

참고URL : https://stackoverflow.com/questions/5127813/call-mvc-3-client-side-validation-manually-for-ajax-posts