Deaktivierung der Submit/Post-Schaltfläche, wenn Eingaben leer sind jquery

Question

Ich habe überall gesucht, aber nichts gefunden, was bei mir funktioniert hat. Ich versuche zu verhindern, dass Benutzer unvollständige Formulare senden. Ich habe "submit" standardmäßig deaktiviert, und die Absicht ist, das Attribut "disable" zu entfernen, wenn alle Eingaben bereitgestellt wurden. Aus irgendeinem Grund ist der Absenden-Button immer noch deaktiviert. Ich glaube, der Code unten sollte funktionieren, aber ich denke, ich könnte etwas verpassen.

FYI - Ich benutze Jquery datepicker und timepicker, um Benutzer Daten und Zeiten auswählen zu lassen.

Würde jemand einem Neuling helfen können?

<script> 
 
\t $(document).ready(function() { 
 
\t  $('.field input').keyup(function() { 
 
\t 
 
\t   var empty = false; 
 
\t   $('.field input').each(function() { 
 
\t    if ($(this).val().length == 0) { 
 
\t     empty = true; 
 
\t    } 
 
\t   }); 
 
\t 
 
\t   if (empty) { 
 
\t    $('.actions input').attr('disabled', 'disabled'); 
 
\t   } else { 
 
\t    $('.actions input').removeAttr('disabled'); 
 
\t   } 
 
\t  }); 
 
\t }); 
 
\t 
 
</script> 
 

 

 
    <div> 
 

 
\t <form class="form" name="frm1" method="POST"> 
 
\t 
 
\t  <div class='field'> 
 
\t  <label for="datepicker">Day:</label> 
 
\t  <input type="text" name="txtDate" id="datepicker"> </br> 
 
\t  </div> 
 
\t  
 
\t  <div class='field'> 
 
\t  <label for="fromtime">From:</label> 
 
\t  <input type="text" name="txtStartTime" id="fromtime"></br> 
 
\t  </div> 
 
\t  
 
\t  <div class='field'> 
 
\t  <label for="totime">To:</label> 
 
\t  <input type="text" name="txtEndTime" id="totime"></br> 
 
\t  </div> 
 
\t  
 
\t  <div class='droppies'> 
 
\t  \t  <label for="level">Level</label> 
 
\t \t  <select name="level" id="level"> 
 
\t \t \t \t <option selected value='%'></option> 
 
\t \t \t \t <option value='Beginner'>Beginner</option> 
 
\t \t \t \t <option value='Intermediate'>Intermediate</option> 
 
\t \t \t \t <option value='Advanced'>Advanced</option> 
 
\t \t \t \t <option value='%'>Any levels</option> 
 
\t \t \t \t 
 
\t \t  </select> 
 
\t  </div> 
 
\t  
 
\t  <div class='actions'> 
 
\t  \t <input type="submit" name="submit" value="search" disabled="disabled"> 
 
\t  </div> 
 
    \t </form> 
 
\t 
 

 
    </div>

Answer 1

Sie können den HTML-Eingabe erforderlich hinzufügen.

<input type="text" name="txtDate" id="datepicker" required> 

Answer 2

Ich nehme an, dass Sie IE verwenden? Da attr deaktiviert werden dort nicht funktioniert, müssen Sie verwenden:

$('.actions input').prop('disabled', true); 

Und

$('.actions input').prop('disabled', false); 

Answer 3

Das Problem, das Sie in laufen ist mit der Art des Zuhörers Sie implementieren. Sie versuchen NUR, den Status Ihrer deaktivierten Taste zu ändern, wenn eine Taste an Ihren Eingängen ausgelöst wird. Wenn Sie Ihr Datum mit Klicks ändern, was die Absicht Ihres jquery-Zeitpicker-Plugins ist, werden Sie KEINE Überprüfung des Validierungsstatus auslösen.

Sie sollten Uhr für alle Änderungen in Ihren Eingabeelementen verwenden.

$('.field input').change(function(){ ... logic ...}); 

Answer 4

Verwenden .filter die Zählung der Elemente mit dem Wert als ''

Verwenden onSelect in Datepicker Optionen zu erhalten, die Validierungen auf Datum zu testen wählen.

Hinweis: Verwenden Sie .prop over .attr. $(SELECTOR).on('input') könnte verwendet werden. Das DOM input Ereignis wird synchron ausgelöst, wenn der Wert eines <input> or <textarea> Element

Try this geändert wird:

function test() { 
 
    var len = $('.field :input').filter(function() { 
 
    return !$(this).val(); 
 
    }).length; 
 
    $('.actions input').prop('disabled', !!len); 
 
} 
 

 
$(document).ready(function() { 
 
    $('#datepicker').datepicker({ 
 
    dateFormat: 'dd-mm-yy', 
 
    onSelect: test 
 
    }); 
 
    $('.field input').keyup(test); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script> 
 
<link href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" rel="stylesheet" /> 
 
<div> 
 
    <form class="form" name="frm1" method="POST"> 
 
    <div class='field'> 
 
     <label for="datepicker">Day:</label> 
 
     <input type="text" name="txtDate" id="datepicker"> 
 
    </div> 
 
    <div class='field'> 
 
     <label for="fromtime">From:</label> 
 
     <input type="text" name="txtStartTime" id="fromtime"> 
 
    </div> 
 
    <div class='field'> 
 
     <label for="totime">To:</label> 
 
     <input type="text" name="txtEndTime" id="totime"> 
 
    </div> 
 
    <div class='droppies'> 
 
     <label for="level">Level</label> 
 
     <select name="level" id="level"> 
 
     <option selected value='%'></option> 
 
     <option value='Beginner'>Beginner</option> 
 
     <option value='Intermediate'>Intermediate</option> 
 
     <option value='Advanced'>Advanced</option> 
 
     <option value='%'>Any levels</option> 
 
     </select> 
 
    </div> 
 
    <div class='actions'> 
 
     <input type="submit" name="submit" value="search" disabled="disabled"> 
 
    </div> 
 
    </form> 
 
</div>

Fiddle here