jQuery 实现表单提交前检验元素值是否为空

jQuery 实现表单提交前检验元素值是否为空

在<form>标签中添加 onsubmit="return checkForm()"<form class="form1" onsubmit="return checkForm()" action="user/add.action">
<div class="div1">
<ul>
<li>
<div class="div2">

id:<input type="text" name="id" id="id" >
<span style="display:none;border:0;float:right;margin-right:180px" id="t1" >请输入数字</span><br />
</div>
<div id="id1" class="id2" style="dispaly:block">
<span class="id2">请输入你的id</span>
</div>
</li>

<li >

<div >
用户名:<input type="text" name="username" id="username" >
<span style="display:none;border:0;float:right;margin-right:50px" id="t2" >用户名长度为3-6位</span><br />
</div>
<div id="usern" class="username1" style="dispaly:block">
<span class="username1">请输入你的用户名</span>
</div>
</li>

<li>

<div class="div2">
密码 :<input type="text" name="password" id="password">
<span style="display:block ;border:0;float:right;margin-right:50px" id="t3" >请输入6-18位字母或数字</span><br />
</div>
<div id="pwd" class="pwd1" style="dispaly:block">
<span class="pwd1">请输入你的密码</span>
</div>
</li>

<li>

<div class="div2">
性别 :<input type="radio" name="sex" id="sex" checked="checked" value="0">男
<input type="radio" name="sex" id="sex" value="1">女<br />
</div>
</li>
</ul>
</div>
<div class="div1">
<div></div>
<input type="reset" value="重置">
<input type="submit" value="确定" >
</div>

</form>
jQuery代码如下<script type="text/javascript">

var flag = true;
var flag1= true;
var flag2= true;
 function checkForm(form1){
if($("#id").val() == ""){
$("#id1").show();
flag = false;
}else{
$("#id1").hide();
flag = true;
}
if($("#username").val() == ""){
$("#usern").show();
flag1 = false;
}else{
$("#usern").hide();
flag1 = true;
}
if($("#password").val() == ""){

$("#pwd").show();
flag2 = false;

}else {
$("#pwd").hide();
flag2 = true;
}
if(flag && flag1 && flag2){
$(".form1").submit();

return true;
}else{
return false;
}
return flag;
}
</script>实现如下;



如果不输入内容则显示如下：