javascript - from - Llame a MVC 3 Client Side Validation manualmente para mensajes de Ajax

mvc call javascript function

Question

Estoy creando una aplicación web MVC 3. Quiero utilizar anotaciones de datos en mi clase de entidad y luego usar una validación discreta del lado del cliente antes de hacer una publicación en el servidor. Esto funciona bien al hacer 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 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 volver a enviar mi publicación ajax al servidor? A continuación hay 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) %>

    <% } %>

He intentado con este código pero solo valida el nombre y no muestra el resumen de validación.

    $("#CustomerEditSave").click(function () {
        $(form).validate();
        //Ajax call here
    });

Answer 1

¡¡IMPORTANTE!!:

La solución de Paul es la respuesta correcta a la pregunta, no la del Dr. Rob.

Aunque puede usar valid () en lugar de validate (). Form ().

Pero lo más importante, realmente no hay ninguna razón para restringir su código como lo sugiere el Dr. Rob, es decir, no. Haga clic y solo use .submit. ¡Eso no es lo que resolvió el problema! Lo que resolvió el problema fue envolver el llamado $ .ajax (...) en la declaración if. Es decir:

if($("#MyForm").valid())
{
    //call to $.ajax or equivalent goes in here.
}

Creo que es necesario aclarar, ya que, de lo contrario, se ofuscaría la verdadera respuesta al problema.

Answer 2

$ (YourForm) .data (''discreta validación''). Validate ()

Answer 3

.Valid () funciona. es decir, le dice si su formulario es válido. Sin embargo, solo no ayuda mostrar Y ocultar mensajes correctamente. aquí está mi método de validación manual

function validate()
        {
            //valid() not only tells us whether the form is valid but 
            //also ensures that errors are shown !!!
            if ($("form").valid())
            {
                //if the form is valid we may need to hide previously displayed messages
                $(".validation-summary-errors").css("display", "none");
                $(".input-validation-error").removeClass("input-validation-error");
                return true;
            }
            else
            {
                //the form is not valide and because we are doing this all manually we also have to
                //show the validation summary manually 
                $(".validation-summary-errors").css("display", "block");
                return false;
            }
        }

Answer 4

Al menos en mi caso (MVC 5), también era necesario agregar el siguiente código o bien .valid() siempre devolvería true:

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

});

Ver http://johnculviner.com/the-unobtrusive-libraries-client-validation-on-ajax-in-asp-net-mvc-3/

Answer 5

He estado hablando con validación del lado del cliente de MVC por días:

No use .click use .submit:

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

Voy a agregar una actualización a esto, considere cancelar el evento en lugar de devolver falso (o hacer ambas cosas):

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

Answer 6

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 jQuery ajax y llamadas MSAjax. También podría intentar usar http://nuget.org/packages/TakeCommand.js o https://github.com/webadvanced/takeCommand que lo manejará automáticamente.

Answer 7

        if(!$(''#myform'').data(''unobtrusiveValidation'').validate())
        {
           // add your extra custom logic
        } 
        else
        { 
             $(''#myform'').submit(); 
        }

Activa la validación y devuelve un booleano, por lo que puede verificar antes de enviar.

Answer 8

I tried all of the above solutions but none worked on MVC5. 

Estoy usando jQuery v2.1.4 y jQuery.Validation v1.11.1. Necesito activar la validación mientras estoy en el procesamiento de la página. Solo debajo de uno funcionó para mí.

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

function validateForm() {`enter code here`
    var elem = document.getElementById(''btnSave'');
    elem.click();    
}

$(''#btnSave'').click(function (evt) {
    //evt.preventDefault();
    var form = $(''form'');
    if (form.valid()) {
        //Ajax call here
    }
    //$(".validation-summary-errors").css("display", "block");
});

function Validate() {
    // If no group name provided the whole page gets validated
    Page_ClientValidate();
}