Javascript onchange（）函数无法正常工作

时间：2015-04-07 07:32:22

标签： javascript

我正在尝试构建一个简单的登录页面。以下是我面临的问题：

  • 例如，如果我转到 “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>";}
            }

    }

2 个答案:

答案 0 :(得分：0)

我解决了你的第二个问题。您可以看到JSBin实现here。您将this.form传递给未定义的函数，而只是传递this并读取其值。如果我找时间的话，我会调查你的第一个问题。

干杯！

答案 1 :(得分：0)

如果字段为空，则可以放置包含此*最初<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;
}

此功能检查所有字段。调用此函数并控制程序的流程。

{{1}}
相关问题
最新问题