问题描述:

I need to achieve check whether form input are empty or not. If form values are empty hightlight the input fields and form otherwise form fields and input do not hightlight.

If all forms and input are not empty I need to call AJAX for each form one by one. I tried with following code but not get 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 for you, if you need remove red color on it value empty please use change event and one notifier for manipulation on input.

相关阅读:
Top