Prop Property von Button entfernen, um mein Formular zu validieren

Question

Ich versuche, eine Formularformularüberprüfung zu erstellen, dass, wenn meine Eingabe leer ist, die Schaltfläche deaktiviert sein sollte. Ich mache das durch jQuery und Prop. Aber ich denke, ich vermisse etwas. Ich habe meinen Code unten hinzugefügt.

Meine ascx Seite

<input id="Name" type="text" class="Name" value=""> 

<button id="edit" disabled="disabled">Edit</button> 

Mein JQuery

function ValidationForm(){ 
     if ($.trim($('#Name').val()) === ''){ 
     return false; 
     } 
     else{ 
     return true; 
     } 
    } 

    $(document).ready(function(){ 
     $('#Name').keyup(function(e) { 
      if (ValidationForm() === true){ 
      $('#edit').prop('disabled', true); 
      } 
      else { 
      $('#edit').prop('disabled', false); 
      } 
     }); 
}); 

Problem: Ausgabe ist, wenn ich Text meiner Eingabefeld-Taste am Hinzufügen bekommen sollte aktiviert, was passiert ist, nicht.

Answer 1

Sie haben eine falsche Schreibweise in Ihrer if-Anweisung, seine if nicht id

if ($.trim($('#Name').val()) == ''){ 
    return false; 
    } 
    else{ 
    return true; 
    } 

Answer 2

können Sie das KeyUp-Ereignis verwenden, um direkt den Inhalt der Eingabe zu testen (ohne die benannte Funktion) und verwenden $(this).val().trim() die bestimmen Inhalt - dann base den deaktivierten Zustand davon ab.

Beachten Sie auch, dass Sie ein Namensattribut für Ihre Texteingabe verpassen, was bedeutet, dass es nicht über das Formular weitergegeben wird, außer Sie verwenden einen Ajax-Aufruf oder anderes Javascript, um den Wert dieser Eingabe zu erhalten.

$(document).ready(function(){ 
 
     $('#Name').keyup(function(e) { 
 
      if ($(this).val().trim() == ''){ 
 
      $('#edit').prop('disabled', true); 
 
      } 
 
      else { 
 
      $('#edit').prop('disabled', false); 
 
      } 
 
     }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="Name" type="text" class="Name" value=""> 
 

 
<button id="edit" disabled="disabled">Edit</button>

Answer 3

Das Problem in Ihrem Code ist, dass, wenn die Überprüfung erfolgreich ist, Sie als wahr die deaktivierte Eigenschaft Ihrer Schaltfläche festlegen. Sie müssen den Codeblock innerhalb von if-else austauschen und auch eine schließende Klammer fehlt.

 $(document).ready(function() { 
      $('#Name').keyup(function(e) { 
       if (ValidationForm() === true) { 
        $('#edit').prop('disabled', false); 
       } else { 
        $('#edit').prop('disabled', true); 
       } 
      } 
     });