Wie man unauffällig jquery remote-Prüfung zu führen async..?
In einem MVC3-app mit jquery unobtrusive validation, und eine Ansicht/ein Modell mit [Remote] validator: ich bin versucht, deaktivieren Sie die Schaltfläche "senden" und Anzeige eines warten-Symbol während der remote-Validierung, und wenn ein gültiges Formular an den server gesendet werden. Ich dachte, ich hätte Sie genagelt, bis ich versuchte, es im IE8.
War das problem, GC und FF waren nicht feuern, die form der submit-Ereignis, wenn das Formular war ungültig, so dass ich nur deaktiviert die Schaltfläche senden im Rahmen dieser Veranstaltung. Aber IE8 ist das abfeuern von diesem Ereignis, wenn das Formular ungültig ist, wodurch die Benutzer niemals in der Lage sein, klicken Sie erneut. (IE8 nicht das Formular senden, aber das Ereignis ausgelöst wird.)
Ich habe versucht, anfügen einer Funktion der Schaltfläche "submit" klicken-Ereignis. Dort habe ich deaktiviert, die Schaltfläche "senden", zeigte sich das warten-Symbol, und war diese:
$('[data-app-form-submit-button="true"]').live('click', function (e) {
var form = $(this).parents('form');
var icon = form.find('[data-app-form-submitting-icon="true"]');
icon.show();
$(this).attr('disabled', 'disabled');
$.ajaxSetup({ async: false });
var isValid = form.valid();
$.ajaxSetup({ async: true });
alert(isValid);
});
Das problem ist, dass die ajax-setup-Aufruf ist nicht wirklich ausschalten async. Es funktioniert, wenn ich es aus der Klick-Funktion, aber dann ist es deaktiviert async für alles. Stattdessen wird die Seite " Warnungen "true" sofort getestet, indem ein breakpoint auf dem remote-Validierung action-Methode.
Irgendwelche Ideen?
Zusätzlicher Hinweis:
Ich vergaß zu erwähnen, in IE8, wird der submit-Ereignis wird nur gefeuert, wenn der text-box in Frage fehl schlägt, wird eine Validierung, die passieren können, auf dem client. Zum Beispiel, wenn es nicht erforderlich oder regex submit() gefeuert. Für die remote-überprüfung action-Methode, es wird nicht ausgelöst. Jedoch, sobald es fehl schlägt, wird eine client-Validierung, anschließende remote-Validierungen auch Auslöser der IE8 submit-Ereignis.
Antwort auf Russ Cam (Kommentar #1)
Hier ist der entsprechende code in das viewmodel:
public class SignUpForm : IValidatableObject
{
[DataType(DataType.EmailAddress)]
[Display(Name = "Email Address")]
[Required(ErrorMessage = "Email Address is required.")]
[RegularExpression(@"^(email regex here)$",
ErrorMessage = "This is not a valid email address.")]
[Remote("Validate", "ControllerName", "AreaName", HttpMethod = "POST")]
public string EmailAddress { get; set; }
public IEnumerable<ValidationResult> Validate(
ValidationContext validationContext)
{
Ich bin froh, Sie hatten mich an den gerenderten <form>
. Die form-Tags und input-Elemente wie folgt Aussehen:
<form action="/post-action-method" method="post" novalidate="novalidate">
...
<input class="text-box single-line" data-app-focus="true" data-val="true"
data-val-regex="This is not a valid email address."
data-val-regex-pattern="^(email regex here)$"
data-val-remote="&#39;Email Address&#39; is invalid."
data-val-remote-additionalfields="*.EmailAddress"
data-val-remote-type="POST"
data-val-remote-url="/validate-action-method"
data-val-required="Email Address is required."
id="EmailAddress" name="EmailAddress" type="text" value="">
...
<input type="submit" value="Submit this form"
data-app-form-submit-button="true" />
Nie sah ich die novalidate="novalidate" - Attribut, bis jetzt. Hier ist, was es sieht aus wie in der cshtml-Datei:
@using (Html.BeginForm())
{
@Html.EditorForModel()
@Html.AntiForgeryToken("assault")
}
Ich bin auch mit anti-forgery token, ob das einen Unterschied macht. Danke.
- wären Sie in der Lage, zeigen auch die viewmodel-code und die
<form>
aus der Sicht? - Gepostet viewmodel und gerenderten html, zusammen mit cshtml Quelle. Ist es jquery Validierung oder der unauffällige Adapter, könnte sein das hinzufügen des novalidate-Attribut?
- Ich sah nie novalidate vor. Es existiert nicht in der MVC-3 source code. Was die anderen Pakete hast du installiert?
- Ja, ich sehe es in allen meinen Formen. Vielleicht sollte ich anfangen eine neue Frage. Pakete in MVC-app: AutoMapper, CommonServiceLocator, ELMAH Core-Bibliothek, Elmah.Contrib.Mvc, EF4.1, jQuery, jq-UI jq Validierung, jq Visual Studio 2010 Intellisense, MicrosoftWebMvc, Modernizr, Mvc-Html5-Vorlagen, Mvc2Futures, MvcScaffolding, T4MVC, T4Scaffolding, Unity, Windows Azure AppFabric-Caching, Windows-Azure-Web-Rolle.
- Habe es gefunden, jquery.überprüfen 1.9.0. Gerade aktualisiert. Aus jquery.validate.js Linien 32 & 33: // Hinzufügen novalidate-tag, wenn HTML5. diese.attr('novalidate', 'novalidate');
Du musst angemeldet sein, um einen Kommentar abzugeben.
Es ist eine Art hacky, aber ich würde vorschlagen, Sie versuchen, die folgenden.
Ersten, ausblenden die Schaltfläche Absenden mit
display="none"
, und zeigen Sie Ihren eigenen "submit" - button, läuft dein Skript oben.Zweite, in Ihre Seite, fügen Sie ein flag var [
var remotePending = false;
] und eine variable für einesetInterval
call [var intervalPending;
], und in Ihrem Skript, setzen Sie das flag auf true, dann rufen Sie die folgende Funktion verwendenintervalPending = setInterval('remoteCheck()', 200);
Wird diese ermöglichen es Ihnen, zu warten, für die Fertigstellung der ausstehenden remote-Validierung, dann normal. Ich habe das nicht getestet, also können Sie zu spielen, um um dieses zu arbeiten, wie Sie wollen.
Ich bin ein bisschen spät, um die Tabelle mit dabei, aber ich stolperte über diese Frage zu lösen versucht ein ähnliches problem. Auch ich habe nicht verwenden möchten, Intervall, also kochte ich eine andere Lösung und dachte, es könnte sich lohnen, Detaillierung hier für andere.
Am Ende entschied ich mich zu überschreiben, jQuery-validator startRequest und stopRequest Methoden, um die eigene Logik. Nach der Ausführung meiner eigenen Logik, die ich rufen Sie einfach die alte validator Methoden.
Alles, was ich wollte zu tun, für meine Zwecke war einfach ein "laden" css-Klasse zu einem angrenzenden Validierung Nachricht-Feld ein, um zu zeigen, ein lade-gif, aber Sie können leicht erweitern, diese zu aktivieren/deaktivieren, Taste, etc.
Fand ich mich Rätseln diese Letzte Nacht, und nach dem Versuch, verschiedene Ansätze, landete ich mit einer evolution der counsellorbens. Da counsellorbens hat nicht funktioniert direkt aus der box, ich dachte, ich würde teilen, es zu verhindern, dass andere mit den gleichen Kopfschmerzen. Es ist nicht so "sauber" eine Lösung, wie ich möchte (ich hasse es, mithilfe von Abständen). Aber es scheint zu reichen.
Landete ich, dies zu lösen, aber die Schaltfläche deaktivieren /warte-Bild anzeigen nur passieren, wenn es eine gültige vorgelegten form. Es ist aber okay, da mehrere ungültige Formular idempotent sind, die der Benutzer klicken kann, so viel Sie wollen. (Außerdem ist die remote-Validierung action-Methode wird zwischengespeichert gegen seine Parameterwerte.)
Dies ist ein wenig hacky auch, aber wenn ich nicht verwenden, setTimeout, die submit-Aktion war nie die Entlassung der ungültigen hf.