检查多个表单输入值不为空

Question

我需要实现检查表单输入是否为空。如果表单值为空，则突出显示输入字段和表单，否则表单字段和输入不会突出显示。

如果所有表单和输入都不为空，我需要为每个表单一个一个调用 AJAX。我尝试了以下代码，但没有得到正确的输入。

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

    });

</script>

这可能对您有用，如果您需要删除其空值上的红色，请使用更改事件和一个通知器来操作输入。