Смешивание ненавязчивой проверки asp mvc3 с плагином проверки jquery - PullRequest
5 голосов
/ 29 апреля 2011

Для проверки на стороне клиента asp mvc3 можно ли смешивать стандартный, ненавязчивый стиль по умолчанию с плагином проверки jquery?

Это форма в представлении:

@using (Html.BeginForm("", "", FormMethod.Post, new { id = "newRatingForm" }))
{   
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Rating</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Rate)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Rate)
            @Html.ValidationMessageFor(model => model.Rate)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

Ненавязчивый прекрасно работает по умолчанию, используя обычные атрибуты проверки свойств модели.Цель состоит в том, чтобы заменить биты «model.Rate» в форме на [fyneworks] [1] плагин jquery star rating и использовать плагин проверки jquery только для этой части формы:

<span>Your Rating:</span>
<div id="ratingStars">
    <input class="star {split:2}" type="radio" name="Rating" value="0.5"/>
    <input class="star {split:2}" type="radio" name="Rating" value="1.0"/>
    <input class="star {split:2}" type="radio" name="Rating" value="1.5"/>
    <input class="star {split:2}" type="radio" name="Rating" value="2.0"/>
    <input class="star {split:2}" type="radio" name="Rating" value="2.5"/>
    <input class="star {split:2}" type="radio" name="Rating" value="3.0"/>
    <input class="star {split:2}" type="radio" name="Rating" value="3.5"/>
    <input class="star {split:2}" type="radio" name="Rating" value="4.0"/>
    <input class="star {split:2}" type="radio" name="Rating" value="4.5"/>
    <input class="star {split:2}" type="radio" name="Rating" value="5.0"/>
</div>

Iугнали действие отправки для формы и преобразовали значения формы в Json, чтобы выполнить ajax-запрос с:

$("#newRatingForm").submit(function (event) {
    event.preventDefault();

    if ($(this).valid()) {        
        newRatingSubmit();
    }    
}); 

function newRatingSubmit() {
    //jquery ajax request using form values converted to Json
}

Кажется, что радио-кнопки нарушают форму, и код перехвата больше не работает, т.е. когда я нажимаю "отправить"к серверу не делается никаких запросов (наблюдение за консолью firebug), и форма просто исчезает.Опять же, все отлично работает только с простой формой mvc3.

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

$("#newRatingForm").validate({
    meta: "validate", 
    errorLabelContainer: "#ErrorDiv",
    wrapper: "div",
    rules:
    {
        Rating: {
            required: true
        }
    },

    messages:
    {
        Rating: {
            required: 'A Rating required.'
        }
    },

    onfocusout: false,
    onkeyup: false,

    //handle validation ok, POST submit
    submitHandler: function (label) {
        newRatingSubmit();
    }
 });

КакВ качестве альтернативы я могу проверить стандартную HTML-форму, используя плагин звездной оценки, используя плагин проверки jquery, и отправить его с помощью приведенного выше кода, но это не выглядит как «asp.net mvc».Например, мне тогда нужно 2 набора сообщений проверки - 1 для сервера, использующего атрибуты проверки, и другой для представления клиента.

Ответы [ 2 ]

2 голосов
/ 29 апреля 2011
jQuery.validator.addMethod("methodeName", function (value, element, params) {
        if (somthing) {
            return false;
        }
        return true;
    });

    jQuery.validator.unobtrusive.adapters.addBool("methodeName");

и в html добавить 2 атрибута

dal-val = истина и dal-val-methodeName="errorMessage"

0 голосов
/ 07 мая 2011

В соответствии с предложением @Vadim, я украсил элементы управления звездным рейтингом моей формы: data-val = "true" data-val-required = "Пожалуйста, введите свой рейтинг", как в;

<div id="ratingStars">
        <input class="star {split:2}" type="radio" name="Rating" value="0.5" data-val="true" data-val-required="Please enter your rating"/>
        <input class="star {split:2}" type="radio" name="Rating" value="1.0" data-val="true"data-val-required="Please enter your rating"/>
        <input class="star {split:2}" type="radio" name="Rating" value="1.5" data-val="true" data-val-required="Please enter your rating"/>
        <input class="star {split:2}" type="radio" name="Rating" value="2.0" data-val="true" data-val-required="Please enter your rating"/>
        <input class="star {split:2}" type="radio" name="Rating" value="2.5" data-val="true" data-val-required="Please enter your rating"/>
        <input class="star {split:2}" type="radio" name="Rating" value="3.0" data-val="true" data-val-required="Please enter your rating"/>
        <input class="star {split:2}" type="radio" name="Rating" value="3.5" data-val="true" data-val-required="Please enter your rating"/>
        <input class="star {split:2}" type="radio" name="Rating" value="4.0" data-val="true" data-val-required="Please enter your rating"/>
        <input class="star {split:2}" type="radio" name="Rating" value="4.5" data-val="true" data-val-required="Please enter your rating"/>
        <input class="star {split:2}" type="radio" name="Rating" value="5.0" data-val="true" data-val-required="Please enter your rating"/>
    </div>
    <span data-valmsg-replace="true" data-valmsg-for="Rating" class="field-validation-valid" style="display:block; width:80px"></span>

Мне не нужен пользовательский валидатор, я думаю, так как валидатор jquery по умолчанию 'required' подойдет. Это вроде работает. Тем не менее, в первый раз, когда я нажимаю «Отправить», я получаю точный результат, на который я надеюсь;

validation ok with 1st submit

Если я затем выберу рейтинг и снова нажму на отправить (без, скажем, ввода электронного письма), форма просто «исчезнет» из поля зрения, и мой контроллер не попадет.

Если я заменим переключатели на обычное текстовое поле, чтобы принять оценку;

<input type="text" name="Rating" id="Rating" data-val-required="Please enter your rating" data-val="true" class="text-box single-line"/>

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

...