Проверьте, что входные значения нескольких форм не пустые

Question

Мне нужно проверить, пустые ли входы формы или нет. Если значения формы пустые hightlight, поля ввода и форма в противном случае образуют поля и ввод не затягиваются.

Если все формы и ввод не пустые, мне нужно позвонить AJAX для каждой формы по одному. Я пробовал со следующим кодом, но не получил вход coorect.

Мой HTML

<div id="entrycontloop">        
     <form action="" class="form-inline multipleformgrp" method="POST" enctype="multipart/form-data" autocomplete="off" >      
      <div class="form-group"> 
       <label for="firstname">First Name<span class="cs_mandatory">*</span></label> 
       <input type="text" class="form-control ampl_width90" maxlength="25" id="firstname" name="firstname" value="" placeholder="Firstname *" > 
      </div> 
      <div class="form-group"> 
       <label for="lastname">Last Name<span class="cs_mandatory">*</span></label> 
       <input type="text" class="form-control ampl_width90" maxlength="25" id="lastname" name="lastname" value="" placeholder="Lastname *"> 
      </div>    
     </form>    
     <form action="" class="form-inline multipleplayerformgrp" method="POST" enctype="multipart/form-data" autocomplete="off">     
      <div class="form-group"> 
       <label for="firstname">First Name<span class="cs_mandatory">*</span></label> 
       <input type="text" class="form-control ampl_width90" maxlength="25" id="firstname" name="firstname" value="" placeholder="Firstname *" > 
      </div> 
      <div class="form-group"> 
       <label for="lastname">Last Name<span class="cs_mandatory">*</span></label> 
       <input type="text" class="form-control ampl_width90" maxlength="25" id="lastname" name="lastname" value="" placeholder="Lastname *"> 
      </div>    
     </form>    
    </div> 

JQuery

<script> 
     $(document).on('click','.submitallplayerbtn',function(){  

      var AddPlayerChk = true; 
      var FormCount = $('#entrycontloop .multipleformgrp').length; 

      $('#entrycontloop .multipleformgrp').each(function(){ 

       var $thisform = $(this);  
       $thisform.css('border','0px solid red'); 
       $thisform.find('input').css('border','1px solid #d6d6d6'); 

       var lastname = $thisform.find("#lastname").val(); 

       if(firstname==''){ 
        $thisform.find("#firstname").focus(); 
        $thisform.find("#firstname").css('border','1px solid red'); 
        AddPlayerChk = false; 
       } 
       if(lastname==''){ 
        $thisform.find("#lastname").focus(); 
        $thisform.find("#lastname").css('border','1px solid red'); 
        AddPlayerChk = false; 
       } 

       if(AddPlayerChk){   
        $thisform.closest('.multipleplayerformgrp').css('border','0px solid red');    
       }else{   
        $thisform.closest('.multipleplayerformgrp').css('border','1px solid red');  
       } 

      }); 
       if(AddPlayerChk){   
        return false; 
       }else{ 
        alert('ajax call'); 
       } 
     }); 
    </script> 

Answer 1

HTML

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<div id="entrycontloop">        
    <form action="" class="form-inline multipleformgrp" method="POST" enctype="multipart/form-data" autocomplete="off" >      
     <div class="form-group"> 
      <label for="firstname">First Name<span class="cs_mandatory">*</span></label> 
      <input type="text" class="form-control ampl_width90" maxlength="25" id="firstname" name="firstname" value="" placeholder="Firstname *" > 
     </div> 
     <div class="form-group"> 
      <label for="lastname">Last Name<span class="cs_mandatory">*</span></label> 
      <input type="text" class="mandatory form-control ampl_width90" maxlength="25" id="lastname" name="lastname" value="" placeholder="Lastname *"> 
     </div>    
    </form>    
    <form action="" class="form-inline multipleplayerformgrp" method="POST" enctype="multipart/form-data" autocomplete="off">     
     <div class="form-group"> 
      <label for="firstname">First Name<span class="cs_mandatory">*</span></label> 
      <input type="text" class="form-control ampl_width90" maxlength="25" id="firstname" name="firstname" value="" placeholder="Firstname *" > 
     </div> 
     <div class="form-group"> 
      <label for="lastname">Last Name<span class="cs_mandatory">*</span></label> 
      <input type="text" class="mandatory form-control ampl_width90" maxlength="25" id="lastname" name="lastname" value="" placeholder="Lastname *"> 
     </div>    
    </form> 
    <button class="submitallplayerbtn">Submit</>   
</div> 

JQuery

<script> 
    $(document).on('click','.submitallplayerbtn',function(){ 
     $forms=$('form'); 
     var allvalid=true; 
     $($forms).each(function(index,$form){ 
      $inputs=$($form).find('input'); 

      $($inputs).each(function(index,$input){ 
       if($($input).val()=="" && $($input).hasClass('mandatory')) 
       { 

        $($input).css('border','1px solid red'); 
        allvalid=false; 

       } 
       else 
       { 
        $($input).css('border','1px solid black'); 
       } 
      }); 
     });'' 
     if(!allvalid) 
     { 
      return false; 
     } 
     alert('ajaxcall'); 

    }); 

</script> 

это может сработать для вас, если вам нужно удалить красный цвет на нем значение пустое, используйте событие изменения и один уведомитель для манипуляции на входе.