Check multiple form input value are not empty

Question

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>

Veshraj Joshi · Accepted Answer · 2019-02-09 10:06:53Z

4

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;
        }
        else
        {
            alert('ajaxcall');
        }

    });

</script>

this may work for you, if you need to remove thw red color on its empty value please use change event and one notifier for manipulation on input.

edited Feb 9, 2019 at 10:06

answered Feb 6, 2016 at 9:31

Veshraj Joshi

3,5874 gold badges32 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Vel Over a year ago

Thanks @VeshrajJoshi. Some fields are not mandatory. How to left those fields?

Vel Over a year ago

and I need to highlight empty input fields form. Its not working. Can you check this?

Veshraj Joshi Over a year ago

what's that highlight means ..... have red border-color right, i just edit my answer as per your request... last names are highlighted by red color, check in your browser,

Vel Over a year ago

I want to highlight single form which is has empty input field. In my code I used this $thisform.closest('.multipleplayerformgrp').css('border','1px solid red'); . But its not working

Collectives™ on Stack Overflow

Check multiple form input value are not empty

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related