Mühe, sich unauffällig Validierung der Arbeit mit mvc 3 jquery ajax post
Habe ich mit viel Mühe, die überprüfung der Arbeit auf MVC3. Es funktioniert, wenn ich nur laden Sie die Seite direkt, aber es überprüft nicht, wenn ich die jquery-AJAX-POST:
Dieses Formular ist geladen mit $('#modal-dialog').load('/DartsMVC/Restaurant/Edit/13')
, Dies ist das gerenderte HTML:
<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 verwendet wird, durch abfangen der form/submit. Das modale Dialogfeld öffnet sich und schließt sich, nachdem der post abgeschlossen ist. Ich würde gerne überprüfen, das Formular vor dem versenden der post:
//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 + "')");
}
});
}
});
Habe ich etwas kaputt geht dadurch? .valid()
gibt immer true zurück.
Meine web.config ist:
<appSettings>
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>
Meine Seite Quelle:
<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>
Und mein Modell hat:
[Required]
public string Name { get; set; }
Nach mehr Forschung, ich denke, es kann etwas damit zu tun haben dynamische Steuerelemente:
- Da der data-val-Attribute vorhanden sind, ist es nicht eine Form Umfang Problem
- Ich werde versuchen, den Aufruf $.validator.unauffällig ist.parse('#formid'). Wenn das doensn nicht funktioniert, ich werde diese last resort:
- http://xhalent.wordpress.com/2011/01/24/applying-unobtrusive-validation-to-dynamic-content/
Du musst angemeldet sein, um einen Kommentar abzugeben.
Gelöst
Aufrufen $.validator.unauffällig ist.parse($('form')) hat den trick. Ich denke, der validator muss neu erstellt werden, die für dynamische Inhalte
//reinitialize unobtrusive validation addValidationToForm: function(formToAdd) { jQuery.each(formToAdd, function(i, form) { $(form).removeData("validator"); $.validator.unobtrusive.parse(form); }); }, addValidationToFormRemoveFromOthers: function(formToAdd, formsToRemoveFrom) { for(var from in formsToRemoveFrom) { $(from).removeData("validator"); } global.addValidationToForm(formToAdd); }