Estoy creando una aplicación web MVC 3. Quiero usar anotaciones de datos en mi clase de entidad y luego usar una validación discreta del lado del cliente antes de enviar una publicación al servidor. Esto funciona bien cuando se hace una publicación regular. Obtengo la validación y el resumen de validación si alguno de los campos no es válido. Sin embargo, quiero volver a publicar la información a través de ajax y json. ¿Cómo puedo validar 'manualmente' el formulario en el lado del cliente primero y luego hacer que mi publicación ajax vuelva al servidor? A continuación se muestra una versión resumida de mi código.
public class Customer { [Required(ErrorMessage = "The customer's first name is required.")] public string FirstName { get; set; } [Required(ErrorMessage = "The customer's last name is required.")] public string LastName { get; set; } } <% using (Html.BeginForm()) { %> <%: Html.LabelFor(model => model.FirstName, "First Name")%> <%: Html.TextBoxFor(model => model.FirstName, new { @class = "TextBox", id = "Customer.FirstName" })%> <%: Html.ValidationMessageFor(model => model.FirstName, "*")%> <%: Html.LabelFor(model => model.LastName, "Last Name")%> <%: Html.TextBoxFor(model => model.LastName, new { @class = "TextBox", id = "Customer.LastName" })%> <%: Html.ValidationMessageFor(model => model.LastName, "*")%> <div id="CustomerEditSave" class="Button CustomerEditButtons" style="margin-right:40px;"> <a href="#">Save</a> </div> <%: Html.ValidationSummary(true) %> <% } %>Probé este código pero solo valida el nombre y no muestra el resumen de validación.
$("#CustomerEditSave").click(function () { $(form).validate(); //Ajax call here });Tratar:
//using the form as the jQuery selector (recommended) $('form').submit(function(evt) { evt.preventDefault(); var $form = $(this); if($form.valid()) { //Ajax call here } }); //using the click event on the submit button $('#buttonId').click(function(evt) { evt.preventDefault(); var $form = $('form'); if($form.valid()) { //Ajax call here } });Esto debería funcionar con llamadas jQuery ajax y MSAjax. También podría intentar usar http://nuget.org/packages/TakeCommand.js o https://github.com/webadvanced/takeCommand , lo manejará automáticamente.
He estado dando vueltas con la validación del lado del cliente de MVC durante días:
No use .haga clic en usar .enviar:
$("#MyForm").on('submit',function () { if($("#MyForm").valid()) { //Do ajax stuff } //Return false regardless of validation to stop form submitting //prior to ajax doing its thing return false; });Agregaré una actualización a esto, considere cancelar el evento en lugar de devolver falso (o hacer ambas cosas):
$("#MyForm").on('submit',function (e) { if($("#MyForm").valid()) { //Do ajax stuff } e.preventDefault(); //Return false regardless of validation to stop form submitting //prior to ajax doing its thing return false; });Al menos en mi caso (MVC 5), también era necesario agregar el siguiente código o, de lo contrario, .valid() siempre devolvería verdadero:
$(function () { $(document).ajaxComplete(function(event, request, settings){ //re-parse the DOM after Ajax to enable client validation for any new form fields that have it enabled $.validator.unobtrusive.parse(document); });});
Consulte http://johnculviner.com/the-unobtrusive-libraries-client-validation-on-ajax-in-asp-net-mvc-3/