Встроенная проверка на стороне клиента с помощью MVC и jQuery - PullRequest
3 голосов
/ 13 ноября 2010

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

Затем я добавил сценарии на мою главную страницу

<script type="text/javascript" src="<%: Url.Content( "~/_assets/js/jquery-1.4.3.min.js" )%>"></script>
<script type="text/javascript" src="<%: Url.Content( "~/_assets/js/jquery.validate.min.js" )%>"></script>
<script type="text/javascript" src="<%: Url.Content( "~/_assets/js/MicrosoftMvcJQueryValidation.js" ) %>"></script> 

и затем я включил проверку на стороне клиента с помощью следующего кода

<% Html.EnableClientValidation(); %>
<% using (Html.BeginForm() { %>
<% } %>

Тогда я не знаю, как включить встроенную проверку для каждого ввода , поэтому, когда пользователь оставляет фокус от любого из них, происходит проверка .

Проверка на стороне клиента, кажется, работает только после того, как я сделал отправку. Но это не «проверка на стороне клиента», так как атрибуты проверяются кодом моего сервера ...

Есть предложения?

Ответы [ 5 ]

5 голосов
/ 19 ноября 2010

Наконец-то я получил решение.

Прежде всего, мои формы никогда не были привязаны к обратным вызовам проверки, предоставляемым кодом внутри скрипта MicrosoftMvcJQueryValidation.js. Это потому, что я использую диалоги jQuery, а форма находится внутри диалога, а скрипт включен в главную страницу.

Моей первой попыткой найти решение было изменение MicrosoftMvcJQueryValidation.js. В частности, я добавил функцию EnableClientSideValidation(), куда я переместил код, который был в функции $(document).ready, как в следующем примере кода

function EnableClientSideValidation() {
    var allFormOptions = window.mvcClientValidationMetadata;
    if (allFormOptions) {
        while (allFormOptions.length > 0) {
            var thisFormOptions = allFormOptions.pop();
            __MVC_EnableClientValidation(thisFormOptions);
        }
    }
}

$(document).ready(function () {
    EnableClientSideValidation();
});

Затем я вызвал ту же функцию внутри блока скрипта, который поместил в код разметки диалога $(document).ready() function

С помощью firebug я поместил точку останова в функцию EnableClientSideValidation(), а затем испытал факт, который вызывался только тогда, когда главная страница была готова, но не из диалога. Это было связано с тем, что у меня был блок скрипта «диалог» внутри тега <form>...</form>, и поэтому скрипт не работал.

Код, подобный этому

<% using (Html.BeginForm()) { %>

    //DIALOG FORM CODE WAS HERE

    <script type="text/javascript">
    $(document).ready(function () {
        EnableClientSideValidation();
    });
    </script>
<% } %>

был изменен на

<% using (Html.BeginForm()) { %>

    //DIALOG FORM CODE WAS HERE

<% } %>

<script type="text/javascript">
$(document).ready(function () {
    EnableClientSideValidation();
});
</script>

Наконец-то все заработало! Я хотел бы поблагодарить vandalo и kdawg за помощь в поиске решения. Что-то все еще пропустили, но ваши ответы стимулировали мою голову.

Я публикую это для других, которые могут иметь такую ​​же проблему.

1 голос
/ 16 ноября 2010

У меня есть мой предыдущий ответ о том, как вручную вызывать обратные вызовы проверки, созданные MicrosoftMvcJQueryValidation.js, однако, может быть более простой ответ. (Я оставляю свой первый ответ как будущую ссылку для кого-либо.)

Параметры подключаемого модуля проверки jQuery дают вам возможность выбрать, какое событие вызывает проверку. С http://docs.jquery.com/Plugins/Validation/validate#toptions, у нас есть следующие свойства опции: onsubmit, onfocusout и onkeyup. Вы должны быть в состоянии назначить эти значения параметров соответствующим образом, и проверка JQuery будет вести себя так, как вы хотите.

Вам, МОЖЕТ, необходимо настроить MicrosoftMvcJQueryValidation.js, чтобы разрешить установку параметров, когда он вызывает проверку. Я должен был сделать это с моей отредактированной копией.

1 голос
/ 16 ноября 2010

Хорошо, вот что я сделал, чтобы MicrosoftMvcJQueryValidation работал для меня в среде AJAX / PartialView. Это актуально, потому что, по сути, оба экземпляра (мой материал AJAX / PartialView и ваш триггер onBlur) требуют явного контроля, когда вызываются методы проверки. Я сделаю все возможное, чтобы захватить все, что вам нужно сделать, потому что мне пришлось отредактировать мой файл MicrosoftMvcJQueryValidation.js, чтобы получить его с поддержкой AJAX. Однако я не верю, что мои изменения необходимы для того, что вы хотите.

Ключ заключается в возможности доступа к функциям проверки, которые генерирует MicrosoftMvcJQuery. К счастью, он добавляет его к элементу формы через свойство с именем validationCallbacks.

В моей пользовательской функции отправки я обращаюсь к этим обратным вызовам и вызываю их следующим образом (form - это элемент DOM, а не объект jQuery):

// this taps into the mvc clientside validation functionality.
// this is a roundabout way of calling jquery.validate() as
// that is what's going on the in callback() function
validationCallbacks = form.validationCallbacks;
if (validationCallbacks) {
    for (i = 0; i < validationCallbacks.length; i += 1) {
        callback = validationCallbacks[i];
        if (!callback()) {
            // subsequent submit handlers should check for 
            // this value before executing
            event.cancelBubble = true;
            return false;
        }
    }
}

После этого мои функции отправки контекста проверяют event.cancelBubble, прежде чем продолжить.

В вашем случае этот код можно вызывать в событии blur для каждого ввода в вашей форме. Конечно, это не самое эффективное решение, так как каждая функция в массиве validationCallbacks проверяет всю форму, но она запускает проверку для каждого размытия. (validationCallbacks - это массив для поддержки нескольких форм, требующих проверки.)

Извините, это не супер специфично для вашей ситуации, но должно получить то, что вам нужно.

0 голосов
/ 15 ноября 2010

Вы можете следовать этому примеру :

Существует проблема со скриптом в MicrosoftMvcJQueryValidation.js, который должен быть обновлен.Измените сценарий MicrosoftMvcValidation.js на шаге 3.

Модель:

Namespace Models

    Public Class Customer

        Private _Name As String = ""
        <DisplayName("Name")> _
        <Required(ErrorMessage:="{0}: Mandatory field.")> _
        <StringLength(10, ErrorMessage:="{0}: Max lenght 10.")> _
        Public Property Name() As String
            Get
                Return _Name
            End Get
            Set(ByVal value As String)
                _Name = value
            End Set
        End Property

        Private _Surname As String = ""
        <DisplayName("Surname")> _
        <Required(ErrorMessage:="{0}: Mandatory field.")> _
        <StringLength(10, ErrorMessage:="{0}: Max lenght 10.")> _
        Public Property Surname() As String
            Get
                Return _Surname
            End Get
            Set(ByVal value As String)
                _Surname = value
            End Set
        End Property

    End Class

End Namespace



   <%@ Page Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of MvcApplication1.Models.Customer)" %>
    <%@ Import Namespace="MvcApplication1.jQuery" %>

    ...
    <% Html.EnableClientValidation()%>
    <%  Using (Html.BeginForm())%>
        <fieldset id="FormEditSet">
            <div>
                <div>
                    <%=Html.LabelFor(Function(m) m.Name)%>
                    <%=Html.EditorFor(Function(m) m.Name)%>
                     <%=Html.ValidationMessageFor(Function(m) m.Name, "*")%>
                </div>                    
                <div>
                    <%=Html.LabelFor(Function(m) m.Surname)%>
                    <%=Html.EditorFor(Function(m) m.Surname)%>
                     <%=Html.ValidationMessageFor(Function(m) m.Surname, "*")%>
                </div>
            </div>
        </fieldset>
        <input type="image" src="<%=Url.Content("~/Content/Images/page_save_big.png")%>"
                    value="Save" title="Save" style="border: none;" />
        <%End Using%>

Html.ValidationSummaryJQuery - это новый метод расширения, который необходимо определить (следуйте примеру).Не забудьте поставить скрипт внизу страницы:

<script src="<%=Url.Content("~/Scripts/MicrosoftAjax/MicrosoftMvcJQueryValidation.min.js")%>" type="text/javascript"></script>
0 голосов
/ 14 ноября 2010

Вам необходимо привязать поля ввода к свойствам вашего контроллера, а затем использовать атрибут «Обязательный» в своих свойствах - см. http://weblogs.asp.net/scottgu/archive/2010/01/15/asp-net-mvc-2-model-validation.aspx для примера.

...