it-swarm.com.de

Rufen Sie die clientseitige Validierung von MVC 3 für Ajax-Beiträge manuell an

Ich erstelle eine MVC 3-Webanwendung. Ich möchte Data Annotations für meine Entitätsklasse verwenden und dann die unauffällige clientseitige Validierung verwenden, bevor Sie einen Beitrag an den Server zurückschicken. Dies funktioniert gut, wenn Sie einen normalen Beitrag erstellen. Ich erhalte eine Bestätigung und eine Zusammenfassung der Überprüfung, wenn eines der Felder nicht gültig ist. Ich möchte jedoch die Informationen über Ajax und Json zurückgeben. Wie kann ich das Formular auf der Clientseite zuerst manuell überprüfen und dann meinen ajax-Beitrag wieder auf dem Server erstellen? Nachfolgend finden Sie eine Zusammenfassung meines Codes.

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

    <% } %>

Ich habe diesen Code ausprobiert, er validiert jedoch nur den Vornamen und zeigt die Validierungszusammenfassung nicht an.

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

Versuchen:

//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
    }
});

Dies sollte mit jQuery-Ajax- und MSAjax-Aufrufen funktionieren. Sie können auch versuchen, http://nuget.org/packages/TakeCommand.js oder https://github.com/webadvanced/takeCommand zu verwenden dies wird automatisch für Sie erledigt.

92
Paul

Ich habe mich seit Tagen mit der Validierung von MVC-Clients auf der Seite herumgespielt:

Verwenden Sie nicht .click verwenden .submit:

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

Ich füge hier ein Update hinzu. Überlegen Sie sich, das Ereignis abzubrechen, anstatt false zurückzugeben (oder beides):

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

Zumindest in meinem Fall (MVC 5) war es notwendig, den folgenden Code hinzuzufügen, sonst würde .valid() immer true zurückgeben:

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

});

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

8
Chris Goodman

WICHTIG!!:

Die Lösung von Paulus ist die richtige Antwort auf die Frage, nicht die von Dr. Rob. 

Sie können zwar nur valid () anstelle von validate (). Form () verwenden.

Noch wichtiger ist jedoch, dass es wirklich keinen Grund gibt, den von Dr. Rob vorgeschlagenen Code einzuschränken, d. Das hat das Problem nicht gelöst! Das Problem wurde dadurch gelöst, dass der Aufruf von $ .ajax (...) in die if-Anweisung eingeschlossen wurde. Dh:

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

Ich denke, das muss geklärt werden, da sonst die wirkliche Antwort auf das Problem verschleiert wird.

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

Es löst die Validierung aus und gibt einen Booleschen Wert zurück, sodass Sie vor dem Senden überprüfen können.

0
mrelva

$ (YourForm) .data ('unauffälligeValidierung'). Validate ()

0
Dipak Pandey

.Valid () funktioniert. Das heißt, Sie erfahren, ob Ihr Formular gültig ist. Es hilft jedoch nicht, Nachrichten korrekt anzuzeigen und auszublenden. Hier ist meine manuelle Validierungsmethode

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;
            }
        }
0
Squibly
I tried all of the above solutions but none worked on MVC5. 

Ich verwende jQuery v2.1.4 und jQuery.Validation v1.11.1. Ich muss die Validierung auslösen, während auf der Seite gerendert wird. Nur unten arbeitete ich für mich.

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