Jquery警告框不显示只有空名称，不显示父亲的名字，电子邮件等。当我点击提交按钮时，它说，"请输入姓名"，即使父亲姓名字段或电子邮件字段是空的。
代码如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Registration Form</title>
<link href="style/bootstrap-3.3.7.min.css" rel="stylesheet" />
<script src="script/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css " />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript ">
var limit = 10;
var Name;
var FatherName;
var CellNo;
$(document).ready(function () {
$("#btnSubmit").click(function () {
$('#txtName').val();
if (name == "") {
alert("please enter the name");
return ;
}
});
$('#txtFatherName').val();
if (FatherName == "") {
alert("please enter ur father name");
return;
}
$('#txtEmail').val();
if (Email == "") {
alert("please enter email");
return;
}
$('#txtAddress').val();
if (Address == "") {
alert("please enter email");
return;
}
$('#txtCellNo').val();
if (CellNo == "") {
alert("please enter email");
return;
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="personalInfo">
<div>
<div class="container">
<h1>Personal Information</h1>
</div>
<br />
<div class="row">
<div class="col-sm-2 text-right">Name :</div>
<div class="col-sm-4">
<input type="text" id="txtName" class="cls1" name="txtName" size="20" />
</div>
</div>
<br />
<div class="row">
<div class="col-sm-2 text-right">Father Name :</div>
<div class="col-sm-4">
<input type="text" id="txtFatherName" class="cls1" name="txtFatherName" size="20" />
</div>
</div>
<br />
</div>
<div class=" row">
<div class="col-sm-2 text-right">Email:</div>
<div class="col-sm-4">
<input type="text" id="txtEmail " class="cls1" name="txtEmail" size="20" />
</div>
</div>
<div>
<br />
<div class="row">
<div class="col-sm-2 text-right">Address</div>
<div class="col-sm-4">
<input type="text" id="txtAddress" class="cls1" name="txtAddress" size="20" />
</div>
</div>
<br />
<div class="row">
<div class="col-sm-2 text-right">Cell No:</div>
<div class="col-sm-4">
<input type="text" id="txtCellNo" class="cls1" name="txtCellNo" size="20" />
</div>
</div>
<br />
<div class=" row">
<div class=" col-sm-2 text-right"></div>
<div class="col-sm-2">
<button type="button" id="btnSubmit" class="btn btn-primary">Submit</button>
<button type="button" id="btnCancel" class="btn btn-default">Cancel</button>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
这是你的开始。
根据你的例子
$('#txtName').val();
if (name == "") {
alert("please enter the name");
return ;
}
"name"没有定义。支票实际上什么也没做。
请注意:此示例不会检查用户是否删除了先前输入的内容。
$(document).ready(function () {
var limit = 10;
$("#btnSubmit").click(function () {
var Name = $('#txtName').val();
var FatherName = $('#txtFatherName').val();
var CellNo = $('#txtCellNo').val();
var Email = $('#txtEmail').val();
var Address = $('#txtAddress').val();
if (Name == "") {
alert("please enter the name");
return ;
} else if (FatherName == "") {
alert("please enter ur father name");
return;
} else if (Email == "") {
alert("please enter email");
return;
} else if (Address == "") {
alert("please enter address");
return;
} else if (CellNo == "") {
alert("please enter cell");
return;
}
});
});<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form id="form1" runat="server">
<div id="personalInfo">
<div>
<div class="container">
<h1>Personal Information</h1>
</div>
<br />
<div class="row">
<div class="col-sm-2 text-right">Name :</div>
<div class="col-sm-4">
<input type="text" id="txtName" class="cls1" name="txtName" size="20" />
</div>
</div>
<br />
<div class="row">
<div class="col-sm-2 text-right">Father Name :</div>
<div class="col-sm-4">
<input type="text" id="txtFatherName" class="cls1" name="txtFatherName" size="20" />
</div>
</div>
<br />
</div>
<div class=" row">
<div class="col-sm-2 text-right">Email:</div>
<div class="col-sm-4">
<input type="text" id="txtEmail " class="cls1" name="txtEmail" size="20" />
</div>
</div>
<div>
<br />
<div class="row">
<div class="col-sm-2 text-right">Address</div>
<div class="col-sm-4">
<input type="text" id="txtAddress" class="cls1" name="txtAddress" size="20" />
</div>
</div>
<br />
<div class="row">
<div class="col-sm-2 text-right">Cell No:</div>
<div class="col-sm-4">
<input type="text" id="txtCellNo" class="cls1" name="txtCellNo" size="20" />
</div>
</div>
<br />
<div class=" row">
<div class=" col-sm-2 text-right"></div>
<div class="col-sm-2">
<button type="button" id="btnSubmit" class="btn btn-primary">Submit</button>
<button type="button" id="btnCancel" class="btn btn-default">Cancel</button>
</div>
</div>
</div>
</div>
</form>