ejemplos - jquery serialize form to json
Problemas para obtener una validaciĆ³n no intrusiva trabajando con mvc 3 en jquery ajax post (1)
Resuelto
Llamar $ .validator.unobtrusive.parse ($ (''form'')) hizo el truco. Creo que el validador debe ser recreado para contenido dinámico
Tengo problemas para obtener la validación para trabajar en MVC3. Funciona bien cuando solo cargo la página directamente, pero no valida cuando uso jquery AJAX POST:
Este formulario se carga usando $(''#modal-dialog'').load(''/DartsMVC/Restaurant/Edit/13'')
, este es el HTML renderizado:
<form action="/DartsMVC/Restaurant/Edit/13" method="post">
<fieldset>
<legend>Restaurant</legend>
<input data-val="true" data-val-number="The field RestaurantID must be a number." data-val-required="The RestaurantID field is required." id="RestaurantID" name="RestaurantID" type="hidden" value="13">
<div class="editor-label">
<label for="Name">Name</label>
</div>
<div class="editor-field">
<input class="text-box single-line" data-val="true" data-val-required="The Name field is required." id="Name" name="Name" type="text" value="furaibo">
<span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
</div>
<p>
<input type="submit" value="Save" class="ui-button ui-widget ui-state-default ui-corner-all" role="button" aria-disabled="false">
</p>
</fieldset>
</form>
AJAX POST se usa al interceptar el formulario / enviar. El cuadro de diálogo modal aparece y se cierra después de que se complete la publicación. Me gustaría validar el formulario antes de enviar la publicación:
// force change the submit data to an ajax POST (usually ''save'', ''delete'' button)
$(''#modal-dialog'').delegate(''form'', ''submit'', function (e) {
e.preventDefault();
var form = $(this);
form.validate(); // does nothing
if (form.valid()) {
$.ajax({
url: form.attr(''action''),
type: "POST",
data: form.serialize(),
success: function (data) {
$(''#modal-dialog'').dialog(''close'');
},
error: function (jqXhr, textStatus, errorThrown) {
alert("Error ''" + jqXhr.status + "'' (textStatus: ''" + textStatus + "'', errorThrown: ''" + errorThrown + "'')");
}
});
}
});
¿Rompí algo haciendo esto? .valid()
siempre devuelve verdadero.
Mi web.config tiene:
<appSettings>
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>
Mi fuente de página tiene:
<link href="/DartsMVC/Content/themes/cupertino/jquery-ui-1.8.14.custom.css" rel="stylesheet" type="text/css">
<script src="/DartsMVC/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
<script src="/DartsMVC/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="/DartsMVC/Scripts/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
<script src="/DartsMVC/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script src="/DartsMVC/Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="/DartsMVC/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>
Y mi modelo tiene:
[Required]
public string Name { get; set; }
Después de más investigaciones, creo que puede tener algo que ver con los controles dinámicos:
- Como existen los atributos data-val, no es un problema de Alcance de formulario
- Intentaré llamar a $ .validator.unobtrusive.parse (''# formid''). Si eso no funciona, utilizaré este último recurso:
- http://xhalent.wordpress.com/2011/01/24/applying-unobtrusive-validation-to-dynamic-content/