it-roy-ru.com

Вызовите MVC 3 Проверка на стороне клиента вручную для сообщений ajax

Я создаю веб-приложение 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
    });
58
Thomas

Пытаться:

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

92
Paul

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

Не используйте .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;
});
24
Rob

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

8
Chris Goodman

ВАЖНЫЙ!!:

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

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

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

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

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

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

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

0
mrelva

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

0
Dipak Pandey

.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;
            }
        }
0
Squibly
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();
}
0
user1810535