Используя jQuery.validate, как вы проверяете только часть формы при выполнении обратного вызова AJAX?

Question

У меня есть веб-страница с несколькими текстовыми полями и двойным списком управления.Все эти элементы данных предназначены для конкретного объекта.Форма предназначена для создания нового экземпляра этой сущности и сохранения его в базе данных.Двойной список показывает доступных людей для использования, и пользователь может перемещать параметры из доступного списка в выбранный список.Все это прекрасно работает, когда опубликовано.Внизу страницы есть кнопка для отправки формы.

Чтобы упростить задачу, я также хочу добавить скрытую «форму», которая позволяет пользователю добавлять нового человека в двойной список, не выходя из него.страница.Они нажимают ссылку «Добавить новый», которая показывает ранее скрытый div.В элементе div есть два текстовых поля: «emailName» и «emailAddress» и кнопка, которую нужно нажать «Add».

Когда пользователь нажимает кнопку «Add», мне нужно проверить поля emailName и emailAddressи только эти два поля.Если они действительны, я сделаю запрос AJAX и обработаю возвращаемые данные, добавив новую опцию в двойной список.

Answer 1

Вот решение, которое я использую.

Во-первых, я отключаю проверку элементов формы моего партиала и никогда не включаю его снова.Я делаю это, определяя селектор класса в опциях валидатора, используя пользовательский скрипт, на который есть ссылка на главной странице.

Затем, нажав кнопку моего родителя, я вызываю validator.element для каждого элемента.Если все они действительны, тогда я выполняю запрос AJAX.

Вызов .element покажет сообщение проверки для поля и вернет логическое значение, указывающее, допустимо ли оно.Вы должны тщательно проверить их, чтобы избежать проблем с коротким замыканием логического оператора, чтобы убедиться, что все сообщения об ошибках отображаются.Я использовал побитовый & для достижения этой цели.

var validator = $("#EmailRecipient_Name").closest("form").validate();

//validator.settings.defaultIgnoreClass is defined in a custom script, and set to ".ignoreValidation"
$("#EmailRecipient_Name").addClass(validator.settings.defaultIgnoreClass);
$("#EmailRecipient_Email").addClass(validator.settings.defaultIgnoreClass);

$("#addNewRecipientLink").click(
    function () {
        $("#addNewRecipientBox").toggle()

        return false;
    }
);

$("#addNewRecipient").click(
    function(){

        var validator = $("#EmailRecipient_Name").closest("form").validate();

        if ( validator.element( "#EmailRecipient_Name" ) & validator.element( "#EmailRecipient_Email" ) )
        {
            $.post(
                "@Url.Action( "Create", "EmailRecipient" )",
                {
                    Name: $("#EmailRecipient_Name").val(),
                    Email : $("#EmailRecipient_Email").val()
                },
                function( data ){
                    if ( data.ErrorMessage )
                    {
                        alert( data.ErrorMessage );
                    }
                    else
                    {
                        $("#SelectedEmailRecipients").append("<option value='" + data.EmailRecipientID + "'>" + data.Name + "</option>");
                        $("#EmailRecipient_Name").val("");
                        $("#EmailRecipient_Email").val("");
                    }
                }
            );
        }

        return false;
    }
);