对带有required="required" 属性的input进行验证
1.input type分为text /radio/checkbox
2.textarea
3.select
代码如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/plugins/bootstrap.min.css">
</head>
<body>
<div class="x-panel p-lr-3" >
<div class="container">
<form id="form1" >
<table width="100%" class="table">
<tbody>
<tr>
<td>
<input type="radio" name="sex" value="男" required="required"/>男
<input type="radio" name="sex" value="女" required="required" />女
</td>
<td>
<input type="radio" name="list" value="十分满意" required="required" />十分满意
<input type="radio" name="list" value="满意" required="required" />满意
<input type="radio" name="list" value="不满意" required="required" />不满意
<input type="radio" name="list" value="非常差" required="required"/>非常差</td>
</tr>
<tr>
<td>
<input type="radio" name="choose" value="十分满意" />yes
<input type="radio" name="choose" value="满意" />no
</td>
<td>
<input type="text" name="" value="" required="required" class="form-control" />
</td>
</tr>
<tr>
<td>
<input type="text" name="" value="" required="required" class="form-control" />
</td>
<td>
<input type="text" name="" value="" required="true" class="form-control" />
</td>
</tr>
<tr>
<td>
<input type="text" name="" value="满意" class="form-control" />
</td>
<td>
<textarea required="required" class="form-control"></textarea>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check1" value="11" />11
<input type="checkbox" name="check1" value="22" />22
<input type="checkbox" name="check1" value="33" />33
<input type="checkbox" name="check1" value="44" />44
</td>
<td>
<input type="checkbox" name="check1" value="1111" required="required" />1111
<input type="checkbox" name="check1" value="2222" required="required"/>2222
<input type="checkbox" name="check1" value="3333" required="required"/>3333
<input type="checkbox" name="check1" value="4444" required="required"/>4444
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check2" value="11" required="required" />11
<input type="checkbox" name="check2" value="22" required="required"/>22
</td>
<td>
<input type="checkbox" name="check3" value="1111" required="required" />1111
<input type="checkbox" name="check3" value="2222" required="required"/>2222
</td>
</tr>
<tr>
<td>
<select required="required" class="form-control" >
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>
<select class="form-control" >
<option value="11">11</option>
<option value="22">22</option>
<option value="33">33</option>
<option value="44">44</option>
<option value="55">55</option>
</select>
</td>
</tr>
</tbody>
</table>
<input type="submit" value="submit" id="btnSubmit" />
</form>
</div>
</div>
<style>
.dashedBorder{
border: 2px dashed rgb(252, 21, 1)!important;
}
</style>
<script src="js/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
$("#btnSubmit").click(function(){
/*checkbox*/
var checkboxArr = $("input[type='checkbox'][required='required']")
var names = []
$.each(checkboxArr,function(index,value){
var checkname = value.name;
if(!names.indexOf(checkname)>-1){
names.push(checkname)
}
});
$.each(names,function(index,value){
var checkboxArrsChecked = $("input[type='checkbox'][required='required'][name ='"+value+"']:checked");
var checkboxArrs = $("input[type='checkbox'][required='required'][name ='"+value+"']");
if(checkboxArrsChecked.length==0){
$(checkboxArrs[0]).parent("td").addClass("dashedBorder");
}
else{
$(checkboxArrs[0]).parent("td").removeClass("dashedBorder");
}
});
/*rodiobox*/
var radioArr = $("input[type='radio'][required='required']")
var radioNames = []
$.each(radioArr,function(index,value){
var radioname = value.name;
if(!radioNames.indexOf(radioname)>-1){
radioNames.push(radioname)
}
});
$.each(radioNames,function(index,value){
var radioArrsChecked = $("input[type='radio'][required='required'][name ='"+value+"']:checked");
var radioArrs = $("input[type='radio'][required='required'][name ='"+value+"']");
if(radioArrsChecked.length==0){
$(radioArrs[0]).parent("td").addClass("dashedBorder");
}
else{
$(radioArrs[0]).parent("td").removeClass("dashedBorder");
}
});
/*input type="text" */
var inputArr = $("input[type='text'][required='required']")
$.each(inputArr,function(index,value){
var inputValue = value.value;
if(inputValue==""){
$(inputArr[index]).parent("td").addClass("dashedBorder");
}
else{
$(inputArr[index]).parent("td").removeClass("dashedBorder");
}
});
/*textarea*/
var textareaArr = $("textarea[required='required']")
$.each(textareaArr,function(index,value){
var textareaValue = value.value;
if(textareaValue.length == 0){
$(textareaArr[index]).parent("td").addClass("dashedBorder");
}
else{
$(textareaArr[index]).parent("td").removeClass("dashedBorder");
}
});
/*select*/
var selectArr = $("select[required='required']")
$.each(selectArr,function(index,value){
var selectValue = value.value;
console.log(selectValue.length)
if(selectValue.length == 0){
console.log(00)
$(selectArr[index]).parent("td").addClass("dashedBorder");
}
else{
console.log(11)
$(selectArr[index]).parent("td").removeClass("dashedBorder");
}
});
});
});
</script>
</script>
</body>
</html>
