Javascript onchange()函数不工作
问题描述:
我正在尝试构建一个简单的登录页面。下面是我所面临的问题:Javascript onchange()函数不工作
-
例如,如果我移动到“第二”输入框,跳过 “第一”输入框,错误信息弹出向上。但是,一旦我从“第二”输入框移动到下一个部分,该 错误信息消失,即使“第一”输入框 仍然是空的。
是否有机制显示空的输入框突出显示,只是为了吸引用户的注意力?
- 有一次,我谨从生日“下拉列表”远没有选择 一个选项,我不是一个错误消息,在理想情况下它应该 提示。任何解决方法来解决这个问题?
对互联网做了相当的研究,但没有效果。
任何帮助将不胜感激!
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>";}
}
}
答
你可以把包含*
这样<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;
}
Thanx为您的及时响应。但是,那不是我正在寻找的! 我的意图是,只要我从下拉列表的“月份”部分移动标签,而没有选择任何选项,它应该抛出一个错误.... 供您参考,看看Google注册页面。 – mindfreak
我更新了我的JSBin [这里](http://jsbin.com/zibegejade/1/)。你的JavaScript只是有很多错误。编写JavaScript时务必将开发人员控制台保持打开状态,以便查看和修复错误。 –
**如果您要通过输入框实现相同的生日代码,则生日代码可以很好地工作,但是,通过引入下拉列表,它会产生一个完全混乱的状态。** – mindfreak