Подтвердить что ты не робот

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

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

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

        [Required(ErrorMessage = "The customer 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
    });
4b9b3361

Ответ 1

Try:

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

Ответ 2

Я трахался с проверкой на стороне клиента 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;
});

Ответ 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/

Ответ 4

ВАЖНО!!:

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

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

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

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

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

Ответ 5

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

Ответ 6

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

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

Ответ 7

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

Ответ 8

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