jquery - Check multiple form input value are not empty -
i need achieve check whether form input empty or not. if form values empty hightlight input fields , form otherwise form fields , input not hightlight.
if forms , input not empty need call ajax each form 1 one. tried following code not coorect input.
my 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>
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> this may work you, if need remove red color on value empty please use change event , 1 notifier manipulation on input.
Comments
Post a Comment