Mezcla de la validación no intrusiva de asp mvc3 con el complemento de validación de jquery

Question

Para la validación del lado del cliente de asp mvc3, ¿es posible mezclar el estilo discreto predeterminado de fábrica con el complemento de validación de jquery?

Ésta es la forma en la vista:

@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> 
} 

Unobtusive funciona muy bien por defecto utilizando los atributos de validación habitual en las propiedades del modelo. El objetivo es reemplazar los bits 'model.Rate' en forma con [fyneworks] [1] plugin de jQuery categoría y utilizar el plugin de validación jQuery sólo para esa parte de la forma:

<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> 

tengo secuestrado la acción de envío de la forma y convertida valores del formulario a JSON que hacer una petición AJAX con:

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

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

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

los botones de radio parecen romper la forma y el código de secuestro que funciona es decir, cuando ya no me haga clic en enviar, no hay petición hecho al servidor (mirando en la consola Firebug) y la forma simplemente desaparece. Nuevamente, todo funciona bien con la forma simple de mvc3.

He intentado añadir una regla de validación de jQuery para los botones de radio calificación, pero no parece hacer ninguna diferencia:

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

Como alternativa puedo validar un formulario HTML estándar usando el plugin categoría utilizando el Complemento de validación jquery y enviarlo con el código anterior, pero eso no parece muy 'asp.net mvc'. Por ejemplo, necesito 2 juegos de mensajes de validación: 1 para el servidor que usa atributos de validación y otro para la vista del cliente.

Answer 1

jQuery.validator.addMethod("methodeName", function (value, element, params) { 
     if (somthing) { 
      return false; 
     } 
     return true; 
    }); 

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

y en html añadir 2 atributos

dal-val = true y dal-val-methodeName="errorMessage"

Answer 2

Como sugiere @Vadim, Decoré los controles de estrellas del formulario con los datos de mi-val = datos "verdaderos" -val-required = "Ingrese su calificación" como en;

<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> 

No necesito un validador personalizado Creo que el validador 'requerido' de jquery funcionará bien. Esto funciona un poco Sin embargo, la primera vez que hago clic en enviar obtengo el resultado exacto que espero;

Si luego selecciona un nivel y haga clic en enviar de nuevo (sin, por ejemplo, escribir un correo electrónico) la forma simplemente 'desaparece' de la vista y mi controlador no se ve afectado.

Si sustituyo los botones de opción con un cuadro de texto sin formato para aceptar la clasificación;

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

funciona muy bien y mi controlador se activa cuando hago clic en enviar. Cuadro de texto no es bueno para la calificación, aunque desafortunadamente.