Javascript Formular Validierung dauert lange zu laufen

Die Frage: Wie gehe ich über die Beschleunigung der Validierung, während weiterhin jqBootstrapValidation als mein Validator verwenden?Javascript Formular Validierung dauert lange zu laufen

Das Problem: Ich habe ein Setup kleine Kontaktform wirklich jqBootstrapValidation als Prüfung gut mit, aber wenn ich zusätzliche Felder starte Zugabe wird es sehr langsam, bis zu dem Punkt, wo, wenn ich mehrere Zeichen in ein Formularfeld eingeben Es dauert länger als eine Sekunde, bis der Validator antwortet.

Die Verlangsamung kann mit 20-30 Formularfeldern leicht beobachtet werden.

Ich habe versucht: Bisher habe ich eine Reihe von Dingen wie versteckte Elemente versucht haben style="display: none;" verwenden, aber das scheint keinen Unterschied zu der Geschwindigkeit zu machen.

Ich könnte das Formular in Teilen bearbeiten, bevor ich es einreiche, aber ich hatte nicht viel Glück dabei. Gibt es einen besseren Weg, um dieser Situation zu begegnen, gibt es vielleicht etwas Einfaches, das ich vermisse, weil ich relativ neu in JavaScript bin?

Meine aktuelle Form/js: Funktioniert gut, bis wir weitere Formularfelder hinzufügen.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>My Title</title> 
</head> 
<body id="page-top" class="index"> 
    <form name="sentMessage" id="contactForm" novalidate> 
     <div class="control-group"> 
      <label>Name</label> 
      <input type="text" placeholder="Name" id="name" required data-validation-required-message="Please a name."> 
      <p class="help-block text-danger"></p> 
     </div> 
     <div class="control-group"> 
      <label>Message</label> 
      <textarea rows="3" placeholder="Message" id="message" required data-validation-required-message="Enter a message."></textarea> 
      <p class="help-block text-danger"></p> 
     </div> 
     <br> 
     <div id="success"></div> 
     <div> 
       <button type="submit">Click to send</button> 
     </div> 
    </form> 

    <!-- jQuery --> 
    <script src="js/jquery.js"></script> 
    <!-- Contact Form Script --> 
    <script src="js/jqBootstrapValidation.js"></script> 
    <script> 
    $(function() { 
     $("#contactForm input,#contactForm textarea").jqBootstrapValidation(); 
    }); 
    </script> 
</body> 
</html>

Validator verwendet: http://ReactiveRaven.github.com/jqBootstrapValidation/

Quelle

2016-06-28 sorifiend

Hinweis: Ich verwende Bootstrap, um mein Layout zu verwalten, und das ist der Grund für die Verwendung von jqBootstrapValidation. Für den Zweck dieser Frage habe ich den gesamten Bootstrap-Code entfernt, so dass er einfacher zu erreichen ist. – sorifiend

Ich bin immer noch die Suche nach einer besseren Antwort, aber in der Zwischenzeit habe ich eine Arbeit um gefunden.

Die Arbeit um ist einfach das Formular nur gegen Vorlage zu validieren und, wenn bestimmte Ereignisse eintreten, und entfernen Sie daher die alle langsam nach unten von einem aktiven Validierer:

Der jqBootstrapValidation Validator registriert wurde, bestätigen laufen, wenn einer der Folgende Ereignisse passierten keyup, focus, blur, click, keydown, keypress, change, was bedeutet, dass, wann auch immer ich in eine Box tippte, viele Ereignisse gleichzeitig passierten und große Verlangsamung verursachten. Die einfache Lösung besteht einfach darin, die Ereignisse zu entfernen, die nicht ausgelöst werden sollen, und nur die kritischen zu behalten.

Zum Beispiel in den jqBootstrapValidation.js in Zeile 431 file: beginnen wir die verschiedenen Veranstaltungen sehen:

// ============================================================= 
    //            WATCH FOR CHANGES 
    // ============================================================= 
    $this.bind(
    "submit.validation", 
    function() { 
     return $this.triggerHandler("change.validation", {submitting: true}); 
    } 
); 
    $this.bind(
    [ 
     "keyup", 
     "focus", 
     "blur", 
     "click", 
     "keydown", 
     "keypress", 
     "change" 
    ].join(".validation ") + ".validation", 
    function (e, params) {

Also in meinem Fall habe ich es nur geändert registrieren die „change“ und „Unschärfe“ Veranstaltungen wie so:

// ============================================================= 
    //            WATCH FOR CHANGES 
    // ============================================================= 
    $this.bind(
    "submit.validation", 
    function() { 
     return $this.triggerHandler("change.validation", {submitting: true}); 
    } 
); 
    $this.bind(
    [ 
     "blur", //validate when a field looses focus 
     "change" //Validate on form submit 
    ].join(".validation ") + ".validation", 
    function (e, params) {

Weitere Tests können erforderlich sein, um sicherzustellen, dass dies wie vorgesehen funktioniert.

Ich denke, es ist erwähnenswert, dass diese Antwort https://stackoverflow.com/a/1587543/1270000 auch zusätzliche Hilfe mit kleinen Optimierung zur Verfügung gestellt.

Quelle

2016-06-28 14:32:00 sorifiend

Einfacher Trick, den ich verwende, ist die Erstellung eines Timers (window.setTimeout), der die aktuelle Methode aufruft und diesen Timer in jeder Aktion zurücksetzt, die z. SchlüsselAuf diese Weise wird der schwere Code nur einmal ausgelöst, z. eine halbe Sekunde nach dem letzten Schlüsselstrich. Der Benutzer wird keinen Unterschied bemerken, und da es nur einmal ausgegeben wird, sollte es viel besser sein. Hoffe, das macht Sinn. –

Nun, das ist eine sehr schlaue Idee, und auf diese Weise verliere ich keine Funktionalität! Vielen Dank für Ihre Eingabe. – sorifiend

Nicht 100% sicher, dass es wirklich in diesem speziellen Fall funktioniert, aber sicherlich einen Versuch wert. Lass mich wissen wie es geht. :-) –

Javascript Formular Validierung dauert lange zu laufen

Antwort

Verwandte Themen