jquery Fehler mit überprüfen, ob leeres Formular

Question

Ich habe ein kleines Problem mit jquery ... Ich habe ein Formular mit Standard 2 Felder, wenn eine der 2 leer ist die Schaltfläche zum Senden aus. Es funktioniert

Aber ich füge auch eine "+" Taste, mit der Sie Textfelder hinzufügen, funktioniert es auch. Aber die Kontrolle dieser Felder funktioniert nicht, wenn nichts in der Sendetaste noch aktiv ist.

hier ist mein Code:

<table class="form-table" id="customFields"> 

    <tr valign="top"> 
     <th scope="row"><label for="customFieldName1">Question</label></th> 
     <div class="input-field col s12"> 
     <td> 
      <input type="text" class="" id="customFieldQuestion" name="customFieldName[]" value="test" placeholder="Question"/> &nbsp; 
      <input type="text" class="" id="customFieldReponse" name="customFieldValue[]" value="test" placeholder="Reponse"/> &nbsp; 

     <a href="javascript:void(0);" class="remCF">Supprimer</a> 
     </td> 
     </div> 

    </tr> 

</table> 

<a href="javascript:void(0);" class="btn waves-effect waves-light btn-large" id="addCF" >+</a> 
<button class="btn waves-effect waves-light btn-large" form="formfaq" type="submit" id="go" name="go"> 
    Envoyer<i class="material-icons right">send</i> 
</button> 
</form> 



<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-3.2.1.js"></script> 


<script> 
$(document).ready(function(){ 
    $("#addCF").click(function(){ 
     $("#customFields").append('<tr valign="top"><th scope="row"><label for="customFieldName1">Question</label></th><div class="input-field col s12"><td><input type="text" class="" id="customFieldQuestion" name="customFieldName[]" value="" placeholder="Question"/> &nbsp;<input type="text" class="" id="customFieldReponse" name="customFieldValue[]" value="" placeholder="Reponse"/> &nbsp;<a href="javascript:void(0);" class="remCF">Remove</a></td></div></tr>'); 
    }); 
    $("#customFields").on('click','.remCF',function(){ 
     $(this).parent().parent().remove(); 
    }); 
}); 
</script> 

<script> 
$(document).ready(function(){ 
    $('#go').attr('disabled',false); 

    $('[id="customFieldQuestion"]').keyup(function(){ 
     if($(this).val().length !=0) 
      $('#go').attr('disabled', false);    
     else 
      $('#go').attr('disabled',true); 
    }) 

    $('[id="customFieldReponse"]').keyup(function(){ 
     if($(this).val().length !=0) 
      $('#go').attr('disabled', false);    
     else 
      $('#go').attr('disabled',true); 
    }) 
}); 
</script> 

Vielen Dank im Voraus für Ihre Hilfe

Answer 1

<form> 
    <table class="form-table" id="customFields"> 
     <tr valign="top"> 
      <th scope="row"><label for="customFieldName1">Question</label></th> 
      <div class="input-field col s12"> 
       <td> 
        <input type="text" class="field_customFieldQuestion" id="customFieldQuestion" name="customFieldName[]" value="test" placeholder="Question"/> &nbsp; 
        <input type="text" class="field_customFieldReponse" id="customFieldReponse" name="customFieldValue[]" value="test" placeholder="Reponse"/> &nbsp; 

        <a href="javascript:void(0);" class="remCF">Supprimer</a> 
       </td> 
      </div> 

     </tr> 

    </table> 

    <a href="javascript:void(0);" class="btn waves-effect waves-light btn-large" id="addCF" >+</a> 
    <button class="btn waves-effect waves-light btn-large" form="formfaq" type="submit" id="go" name="go"> 
     Envoyer<i class="material-icons right">send</i> 
    </button> 
    </form> 

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-3.2.1.js"></script> 


<script> 
    $(document).ready(function(){ 
     $("#addCF").click(function(){ 
      $("#customFields").append('<tr valign="top"><th scope="row"><label for="customFieldName1">Question</label></th><div class="input-field col s12"><td><input type="text" class="field_customFieldQuestion" id="customFieldQuestion" name="customFieldName[]" value="" placeholder="Question"/> &nbsp;<input type="text" class="field_customFieldReponse" id="customFieldReponse" name="customFieldValue[]" value="" placeholder="Reponse"/> &nbsp;<a href="javascript:void(0);" class="remCF">Remove</a></td></div></tr>'); 
      $('#go').attr('disabled',true); 
     }); 
     $("#customFields").on('click','.remCF',function(){ 
      $(this).parent().parent().remove(); 
      $(".field_customFieldReponse").trigger("change") 
     }); 
    }); 
</script> 

<script> 
    $(document).ready(function(){ 
     var customQue = 0; 
     var customRes = 0; 
     $('#go').attr('disabled',false); 
     $("#addCF").click(function(){ 
      customQue = 0; 
      customRes = 0; 
     }) 
     var requiredFields = ['customFieldQuestion', 'customFieldReponse']; 
     requiredFields.forEach(function(input) { 
      $(document).on("keyup blur change click", ".field_" + input, function(e) { 
       if(input == "customFieldQuestion"){ 
        if($(this).val().trim() != ""){ 
         customQue = 1; 
        }else{ 
         customQue = 0; 
        } 
       }else if(input = "customFieldReponse") { 
        if($(this).val().trim() != ""){ 
         customRes = 1; 
        }else{ 
         customRes = 0; 
        } 
       } 
       else{ 

        } 
       if(customQue == 1 && customRes == 1){ 
        $('#go').attr('disabled', false); 
       }else{ 
        $('#go').attr('disabled',true); 
       } 
      }) 
     }); 
    }); 
</script> 

Answer 2

1. Sie können nicht mehrere Elemente mit der gleichen ID haben. Ihr html ist nicht gültig (Sie haben mehrere #customFieldQuestion und #customFieldReponse). Sie müssen etwas anderes wie Klassen oder data-custom attributes verwenden.

2. Sie können nicht Hörer auf dynamische Inhalte festlegen, sollten Sie es auf einem statischen Eltern gesetzt the delegation verwenden, wie $('#customFields').on('keyup', '[data-custom="customFieldQuestion"]', function(){ ...