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>";} 
      } 

    }

来源

2015-04-07 mindfreak

我解决了你的第二个问题。你可以看到一个JSBin实现here。你将这个表单传递给你未定义的函数，而应该只是传递this并读取其值。如果我找到时间，我会研究你的第一个问题。

干杯！

来源

2015-04-07 07:41:49

Thanx为您的及时响应。但是，那不是我正在寻找的！我的意图是，只要我从下拉列表的“月份”部分移动标签，而没有选择任何选项，它应该抛出一个错误.... 供您参考，看看Google注册页面。 – mindfreak

我更新了我的JSBin [这里]（http://jsbin.com/zibegejade/1/）。你的JavaScript只是有很多错误。编写JavaScript时务必将开发人员控制台保持打开状态，以便查看和修复错误。 –

**如果您要通过输入框实现相同的生日代码，则生日代码可以很好地工作，但是，通过引入下拉列表，它会产生一个完全混乱的状态。** – mindfreak

你可以把包含*这样<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; 
}

来源

2015-04-07 08:03:22 ozil

如果您不介意，可否请您帮助我实施？ – mindfreak

\t \t \t <跨度ID = “spanUsernameRequired” 风格= “能见度：隐藏;字型重量：粗体;颜色：红;”> – mindfreak

@ mindfreak是这样的，但你会需要两个跨度为每个输入 – ozil

Javascript onchange（）函数不工作

回答

相关问题