jquery.validate - Schaltfläche deaktiviert bis gültige E-Mail

Question

Ich verwende https://jqueryvalidation.org/, um mein Formular am Frontend zu validieren. Das grundlegende "wenn Feld ist leer - validiere" funktioniert OK.

Aber ich möchte die Absenden-Schaltfläche zunächst deaktiviert werden, bis eine gültige E-Mail-Adresse eingegeben wurde. Ich möchte, dass die Schaltfläche aktiviert wird, sobald das Feld gültig wird (auf Tastendruck).

Also im Grunde muss ich nur die "btn-disabled" -Klasse entfernen, sobald es gültig ist.

Ich habe mit der jQuery zu kämpfen, um diese Funktion/Methode hinzuzufügen. Wäre dankbar, wenn jemand helfen kann.

Heres eine leicht simplifed Version: http://codepen.io/dagford/pen/kXJpEZ

$(document).ready(function(){ 

    $("#reset-form").validate({ 
     rules: { 
      emailaddress: { 
       required: true, 
       email: true 
      } 

     }, 
     messages: { 
      email: "Please enter a valid email address" 
     } 

    }); 

}); 

Answer 1

Sie können überprüfen, ob das Formular nach Eingabe der E-Mail-Adresse gültig ist. Halten Sie die Schaltfläche standardmäßig deaktiviert und entfernen Sie das deaktivierte Attribut, sobald Sie das Formular validiert haben.

$("#emailaddress").on("blur", function(){ 
    if($("#reset-form").valid()) 
    { 
     $("#btn-reset").removeAttr("disabled"); 
    } 
}); 

-Code Pen: http://codepen.io/anon/pen/YWLjKX?editors=1010

Answer 2

Sie haben attr für dieses

$('#button1, #button2').attr("disabled", true); 

Answer 3

prüfen dies:

<script type="text/javascript"> 
       (function() { 
         $('form > input').keyup(function() { 
          var empty = false; 
          $('form > input').each(function() { 
           if ($(this).val() == '') { // write your code for valid email here 
            empty = true; 
           } 
          }); 
          if (empty) { 
           $('#register').attr('disabled', 'disabled'); 
          } else { 
           $('#register').removeAttr('disabled'); 
          } 
         }); 
        })() 
       </script>