JavaScript onchange（）函數不起作用

Question

我正在嘗試構建一個簡單的登錄頁面。 這是我面臨的問題：

例如，如果我移至“第二”輸入框，而跳過“第一”輸入框，則會彈出錯誤消息。 但是，一旦我從“第二”輸入框移至下一部分，即使“第一”輸入框仍為空，錯誤消息也消失了。
是否有一種機制可以將空的輸入框突出顯示，以引起用戶的注意？
一次，我沒有選擇任何選項就離開了生日“下拉列表” ，沒有提示錯誤消息的提示，理想情況下應該如此。 任何解決此問題的方法？

在互聯網上進行了相同的大量研究，但沒有任何效果。

任何幫助將不勝感激！

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

    }

Answer 1

我解決了第二個問題。 您可以在此處看到JSBin實現。 您正在將this.form傳遞給未定義的函數，相反，您應該只傳遞this並從其值讀取。 如果有時間的話，我也會調查您的第一個問題。

干杯!

Answer 2

您可以放置一個包含*的跨度，例如<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;
}

JavaScript onchange（）函數不起作用

問題描述

2 個解決方案

解決方案1
0 2015-04-07 07:41:49

解決方案2
0 2015-04-07 08:03:22

JavaScript onchange（）函數不起作用

問題描述

2 個解決方案

解決方案1 0 2015-04-07 07:41:49

解決方案2 0 2015-04-07 08:03:22

解決方案1
0 2015-04-07 07:41:49

解決方案2
0 2015-04-07 08:03:22