Позвоните в MVC 3 Client Side Validation вручную для сообщений ajax

Question

Я создаю веб-приложение MVC 3. Я хочу использовать аннотации данных в моем классе сущностей, а затем использовать ненавязчивую проверку на стороне клиента, прежде чем отправлять сообщение обратно на сервер. Это прекрасно работает при создании обычного поста. Я получаю подтверждение и сводку проверки, если какое-либо из полей недействительно. Тем не менее, я хочу опубликовать информацию через ajax и json. Как я могу "вручную" проверить форму на стороне клиента, а затем отправить сообщение на сервер. Ниже приведена краткая версия моего кода.

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

Answer 1

Пытаться:

//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 он автоматически обработает это для вас.

Answer 2

Я трахался с проверкой на стороне клиента MVC в течение нескольких дней:

Не используйте.click используйте.submit:

$("#MyForm").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").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;
});

Answer 3

По крайней мере, в моем случае (MVC 5) также необходимо было добавить следующий код или еще .valid() всегда будет возвращать истину:

$(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/

Answer 4

ВАЖНЫЙ!!:

Решение Павла - правильный ответ на вопрос, а не доктора Роба.

Хотя вы можете просто использовать valid() вместо validate(). Form().

Но что еще более важно, на самом деле нет никаких причин ограничивать ваш код, как предлагает доктор Роб, т.е. не.click и использовать только.submit. Это не то, что решило проблему! Решив проблему, мы обернули вызов $.ajax(...) в оператор if. То есть:

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

Я думаю, что это необходимо уточнить, так как в противном случае реальный ответ на проблему будет запутан.

Answer 5

$(YourForm).data('unobtrusiveValidation'). Подтверждения ()

Answer 6

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

Я использую jQuery v2.1.4 и jQuery.Validation v1.11.1. Мне нужно запустить проверку во время рендеринга страницы. Только ниже одного работал на меня.

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

Answer 7

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

Он запускает проверку и возвращает логическое значение, поэтому вы можете проверить перед отправкой.

Answer 8

.Valid() работает. т.е. он говорит вам, является ли ваша форма действительной. Однако само по себе это не помогает правильно показывать и скрывать сообщения. вот мой метод проверки вручную

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