Позвоните 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 use .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;
});

Answer 3

По крайней мере, в моем случае (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/

Answer 4

ВАЖНО !!:

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

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

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

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

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

Answer 5

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 6

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

Answer 7

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

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

Answer 8

$ (YourForm) .data ( 'unobtrusiveValidation'). Проверить ()