我需要检查表单输入是否为空。如果表单值为空,则高亮显示输入字段,否则表单字段和输入不会高亮显示。
如果所有表单和输入都不为空,我需要逐个为每个表单调用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>
答案 0 :(得分: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>
这可能对您有用,如果您需要删除其空值上的红色,请使用更改事件和一个通知程序进行输入操作。