Javascript onchange(）函数不起作用
Javascript onchange() function not working
我正在尝试构建一个简单的登录页面。以下是我面临的问题：
-
例如，如果我移动到"second"输入框，则跳过"first"输入框，弹出错误消息。但是，一旦我从"second"输入框移到下一部分即使"first"输入框仍然是空的。
是否有一种机制可以将空输入框显示为高亮显示，以吸引用户的注意力
- 有一次，我离开生日"下拉列表"而不选择一个选项，我不会收到错误消息，理想情况下是应该有什么解决办法吗
已经在互联网上做了大量的研究，但没有效果。
如有任何帮助，我们将不胜感激
HTML文件
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="retail_banking.css" >
<script type="text/javascript" src="retail_banking_validation.js"></script>
</head>
<body>
<form action="" name="myForm" method="get" onsubmit="" >
<div id="container">
<fieldset>
<legend>Login Page</legend>
<div class="first_container">Name</div>
<div id ="nameBlock">
<input type="text" name="fname" placeholder="First" id="cust_fname" onblur = "return fname_validate()"/>
<input type="text" name="lname" placeholder="Last" id="cust_lname" onblur = "return lname_validate()"/>
</div>
<div id="name_error_msg"></div><br>
<div class="first_container">Birthday</div>
<div id="birthdayBlock">
<select id="mm" name="month" onchange="return month_validate(this.form)">
<option value="00" selected="selected">Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<input type="text" name="day" placeholder="Day" id="dd" maxlength="2" onblur="return date_validate(this)"/>
<input type="text" name="year" placeholder="Year" id="yy" maxlength="4" onblur="return year_validate(this)" />
</div>
<div id="bday_error_msg"></div><br>
<div class="first_container">Contact No</div>
<div class="second_container"><input type="text" name="contactno" value="+91-" id="cust_contactno" class="input_box_adj"/>
<div id="contact_error_msg"></div> <br><br>
<div class="first_container">Gender
<div id ="maritalStatusBlock">Marital Status</div> </div>
<div id="genderBlock">
<select name="gender" id="cust_gender" > <!-- onchange="return gender_validate()" -->
<option selected>Gender</option>
<option value="01">Male</option>
<option value="02">Female</option>
<option value="03">Others</option>
</select>
<select name="marital_status" id="cust_maritalstatus" > <!-- onchange="return marital_status()" -->
<option selected>Marital Status</option>
<option value="01">Single</option>
<option value="02">Married</option>
<option value="03">Divorced</option>
<option value="04">Widow</option>
<option value="05">Unknown</option>
</select>
</div>
<div id="gender_error_msg"></div><br>
<div class="first_container">Address</div>
<div class="second_container"><textarea name="address" placeholder="Please type your Address here...." rows="4" cols="30" id="cust_address" class="input_box_adj" > </textarea></div>
<div id="address_error_msg"></div><br>
<div class="first_container">Email Address</div>
<div class="second_container"><input type="text" name="email" placeholder="Enter your email address.." id="cust_email" class="input_box_adj"/> <!-- onblur="return email_validate()" --> </div>
<div id="email_error_msg"></div><br>
<div class="first_container">Nominee</div>
<div class="nomineeBlock">
<select name="Title" id="title" > <!-- onchange="return nominee_validate()" -->
<option disabled selected>Title</option>
<option value="01">Mr</option>
<option value="02">Mrs</option>
<option value="03">Miss</option>
<option value="04">M/s</option>
<option value="05">Dr.</option>
<option value="06">Prof.</option>
<option value="06">Sir</option>
</select>
<input type="text" name="nominee" placeholder="Enter full name of nominee here.." id="nominee_name"/> <!-- onblur="return nomineeName_validate()" -->
</div>
<div id="email_error_msg"></div><br>
<div class="first_container">Account Type</div>
<div class="accountTypeBlock">
<select name="ac_type" id="cust_ac_type" >
<option disabled selected>Account Type</option>
<option value="01">Savings A/c</option>
<option value="02">Current A/c</option>
<option value="03">Loan A/c</option>
<option value="04">Fixed Deposit A/c</option>
<option value="05">Recurring Deposit A/c</option>
</select>
</div>
<div id="email_error_msg"></div><br><br><br>
<div id="submit_button">
<input type="submit" value="Submit"><br><br><br>
</div>
</div> <!-- <div id="container"> closes here -->
</fieldset>
</form>
</body>
</html>
CSS文件
@CHARSET "ISO-8859-1";
fieldset {
width: 30%;
border: solid 1px black;}
legend {
color: black;
font-style: italic;
font-size: 15px;
border: solid 1px black;
margin: 25px; }
.first_container {
padding: 3px;
width: 150px;
font-style: italic;
font-weight: bold;
color: #a77;}
.second_container {
margin: 5px;
width: 115px;
display : inline-block;}
.input_box_adj {
width: 365px;
padding: 5px; }
#nameBlock {
display: inline-block;}
#cust_fname {
margin: 3px;
padding: 5px;
width: 170px;}
#cust_lname {
margin: 5px;
padding: 5px;
width: 170px;}
#birthdayBlock{
display:inline-block;}
#mm{
width: 158px;
padding: 5px;
margin: 5px;}
#dd{
margin: 3px;
padding: 5px;
width: 75px;}
#yy{
margin: 3px;
padding: 5px;
width: 93px;}
#genderBlock{
margin: 5px;}
#cust_gender{
width: 180px;
padding: 7px;}
#maritalStatusBlock{
margin: -17px; /* Very effective.... It positions the size */
font-style: italic;
font-weight: bold;
color: #a77;
position:absolute;
left: 235px;}
#cust_maritalstatus{
padding: 7px;
width: 190px;
margin: 5px;}
#cust_email{
padding: 5px;}
#nomineeBlock{
display: inline-block;}
#title{
padding: 5px;}
#nominee_name{
padding: 5px;
width: 300px;}
#accountTypeBlock{
margin: 5px;}
#cust_ac_type{
padding: 5px;
width: 380px;}
#submit_button{
width:95px;
margin-left:150px;}
#name_error_msg{
margin: 5px;
color: red; /*This turns error text to red color */ }
#bday_error_msg{
margin: 5px;
color: red;
}
#contact_error_msg {
margin: 5px;
color:red;}
#address_error_msg {
margin: 5px;
background-color: aqua;}
Javascript文件
function fname_validate(){
var x = document.getElementById("cust_fname").value;
var regex_char = /^[A-Za-z]+$/;
if((x == "") || (x==null)){
document.getElementById("name_error_msg").innerHTML = "<b><i>You can't leave this empty</b></i>";
}
else if(isNaN){
document.getElementById("name_error_msg").innerHTML = "<b><i>No numbers allowed</b></i>";}
if(x.match(regex_char)){
document.getElementById("name_error_msg").innerHTML = "";}
return false;
}
function lname_validate(){
var x = document.getElementById("cust_lname").value;
var regex_char = /^[A-Za-z]+$/;
if(x=="" || x==null){
document.getElementById("name_error_msg").innerHTML = "<b><i>You can't leave this empty</b></i>"; }
else if(isNaN){
document.getElementById("name_error_msg").innerHTML = "<b><i> No numbers allowed </b></i>";}
if(x.match(regex_char)){
document.getElementById("name_error_msg").innerHTML = "";}
return false;
}
function month_validate(myForm){
var eID = document.getElementById("mm").value;
var mmVal= eID.options[eID.selectedIndex].value;
//var mmTxt = eID.options[eID.selectedIndex].txt;
if(myform.month.value.length == 0){
document.getElementById("bday_error_msg").innerHTML = "<b><i>You can't leave this empty</i></b>";}
else{
document.getElementById("bday_error_msg").innerHTML = "";}
return false;
}
function date_validate(myForm){
var dd = document.getElementById("dd").value;
if((dd =="") || (dd==null)){
document.getElementById("bday_error_msg").innerHTML = "<b><i>From date_section: You can't leave this empty</b></i>"; }
else{
document.getElementById("bday_error_msg").innerHTML = "";}
return false;
}
function year_validate(){
alert("reached last");
if((yy =="") || (yy==null)){
document.getElementById("bday_error_msg"),innerHTML= "<b><i>You can't leave this empty</b></i>";}
else if((yy!="") || (yy!=null)){
document.getElementById("bday_error_msg"),innerHTML= "";}
}
var mm = month_validate();
alert (mm);
var dd = document.getElementById("dd").value;
var yy = document.getElementById("yy").value;
if((mm==01) || (mm==03) ||(mm==05) || (mm==07) || (mm=="08") ||
(mm==10 ) || (mm==12)){
if((dd>0) && (dd<32)){
document.getElementById("bday_error_msg").innerHTML = "<b><i>HERE 1The date doesn't look right. </i></b>"; }
else{
document.getElementById("bday_error_msg").innerHTML = "";}
}
if((mm==04) || (mm==06) || (mm=="09")
|| (mm==11)){
if((dd>0) && (dd<31)){}
else{
document.getElementById("bday_error_msg").innerHTML = "<b><i>Here 2The date doesn't look right. </i></b>";}
}
else if(mm==02)
{
if((yy%4==0 || yy%400==0) || yy%100==0)
{
if(dd>0 && dd<30){}
else{
document.getElementById("bday_error_msg").innerHTML = "<b><i>Here 3The date doesn't look right. </i></b>";}
}
else if (!(yy%4==0 || yy%400==0) || (yy%100==0)){
if(dd>0 && dd<29){}
else{
document.getElementById("bday_error_msg").innerHTML = "<b><i>The date doesn't look right. </i></b>";}
}
}
我为您解决了第二个问题。您可以在这里看到一个JSBin实现。您将this.form传递给未定义的函数，而应该只传递this并读取其值。如果有时间的话，我也会研究你的第一期。
干杯！
您可以放置一个包含*的跨度，如此<span>*</span>，最初为display:none，如果字段为空，则由display:block可见，以指示用户字段丢失
更新
在每个函数下面，从这些值返回true或false控制程序的流程
function fname_validate(){
var x = document.getElementById("cust_fname").value;
var regex_char = /^[A-Za-z]+$/;
if((x == "") || (x==null)){
document.getElementById("name_error_msg").innerHTML = "<b><i>You can't leave this empty</b></i>";
return false;
}
else if(isNaN){
document.getElementById("name_error_msg").innerHTML = "<b><i>No numbers allowed</b></i>";
return false;
}
if(x.match(regex_char)){
document.getElementById("name_error_msg").innerHTML = "";
return false;
}
return true;
}
function lname_validate(){
var x = document.getElementById("cust_lname").value;
var regex_char = /^[A-Za-z]+$/;
if(x=="" || x==null){
document.getElementById("name_error_msg").innerHTML = "<b><i>You can't leave this empty</b></i>";
return false;
}
else if(isNaN){
document.getElementById("name_error_msg").innerHTML = "<b><i> No numbers allowed </b></i>";
return false;
}
if(x.match(regex_char)){
document.getElementById("name_error_msg").innerHTML = "";
return false;
}
return true;
}
function month_validate(myForm){
var eID = document.getElementById("mm").value;
var mmVal= eID.options[eID.selectedIndex].value;
//var mmTxt = eID.options[eID.selectedIndex].txt;
if(myform.month.value.length == 0){
document.getElementById("bday_error_msg").innerHTML = "<b><i>You can't leave this empty</i></b>";
return false;
}
else{
document.getElementById("bday_error_msg").innerHTML = "";
return false;
}
return true;
}
function date_validate(myForm){
var dd = document.getElementById("dd").value;
if((dd =="") || (dd==null)){
document.getElementById("bday_error_msg").innerHTML = "<b><i>From date_section: You can't leave this empty</b></i>";
return false;
}
else{
document.getElementById("bday_error_msg").innerHTML = "";
return false;
}
return true;
}
function year_validate(){
alert("reached last");
if((yy =="") || (yy==null)){
document.getElementById("bday_error_msg"),innerHTML= "<b><i>You can't leave this empty</b></i>";
return false;
}
else if((yy!="") || (yy!=null)){
document.getElementById("bday_error_msg"),innerHTML= "";
return false;
}
var mm = month_validate();
alert (mm);
var dd = document.getElementById("dd").value;
var yy = document.getElementById("yy").value;
if((mm==01) || (mm==03) ||(mm==05) || (mm==07) || (mm=="08") || mm==10 ) || (mm==12)){
if((dd>0) && (dd<32)){
document.getElementById("bday_error_msg").innerHTML = "<b><i>HERE 1The date doesn't look right. </i></b>";
return false;
}
else{
document.getElementById("bday_error_msg").innerHTML = "";
return false;
}
}
if((mm==04) || (mm==06) || (mm=="09") || (mm==11)){
if((dd>0) && (dd<31)){
return true;
}
else{
document.getElementById("bday_error_msg").innerHTML = "<b><i>Here 2The date doesn't look right. </i></b>";
return false;
}
}
else if(mm==02){
if((yy%4==0 || yy%400==0) || yy%100==0){
if(dd>0 && dd<30){
return true;
}
else{
document.getElementById("bday_error_msg").innerHTML = "<b><i>Here 3The date doesn't look right. </i></b>";
return false;
}
}
else if (!(yy%4==0 || yy%400==0) || (yy%100==0)){
if(dd>0 && dd<29){
return true;
}
else{
document.getElementById("bday_error_msg").innerHTML = "<b><i>The date doesn't look right. </i></b>";
return false;
}
}
return true;
}
}
此函数检查所有字段。调用此函数并控制程序的流程。
function validation(){
if(fname_validate() && lname_validate() && month_validate(myForm) && date_validate(myForm) && year_validate()){
return true;
}
return false;
}
相关文章：
- Ember Data DS.Model's set函数不起作用
- 为什么我的JavaScript堆栈排序函数不起作用
- Javascript onchange(）函数不起作用
- 另一个Ajax函数触发的Ajax函数不起作用
- 从PHP调用JS函数不起作用
- jQuery validate函数不起作用
- JS-窗口宽度函数不起作用
- javascript函数，该函数不起作用，但不会显示任何错误
- 为什么这个排序函数不起作用
- 为什么这个反向函数不起作用
- Javascript parseInt 函数不起作用
- 我的函数不起作用，Ajax调用，JQuery，调用外部?我不知道
- 主干构造函数不起作用
- Javascript:this.value 函数不起作用
- Mocha 的 beforeEach(） 和 done(） 函数不起作用
- 在jQuery中，我的函数不起作用
- jquery-ui-rails的draggable和dropable函数不起作用
- 数学函数不起作用
- Javascript-创建打印到HTML的函数不起作用
- 我上传了客户's服务器一个js函数不起作用
