Javascript onchange() function not working
Question
I am trying to build a simple Login page. Here are the issues I am facing:
For example, if I move to the "second" input box, skipping the "first" input box, an error message pops up. However, once I move from the "second" input box to the next section, the error-message disappears, even though the "first" input box is still empty.
Is there a mechanism to show empty input box as highlighted, just to catch the user's attention ?
- Once, I move away from the birthday "drop-down list" without selecting a option, I am not prompted with a error message, which ideally it should. Any workaround for getting this resolved ?
Have done ample research on the internet for the same, but to no effect.
Any help would be highly appreciated !!
HTML file
<!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 file
@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 file
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 answers
solution1
0 2015-04-07 07:41:49
I solved you second issue. You can see a JSBin implementation here . You were passing this.form to your function which is undefined, instead you should just be passing this and reading from its value. I'll look into your first issue as well if I find the time.
Cheers!
solution2
0 2015-04-07 08:03:22
you can place a span containing * like this <span>*</span> initially display:none if field is empty make it visible by display:block to indicate user field is missing.
Updated
Below each function return true or false from these values control the flow of your program
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;
}
}
This function check all the fields. Call this function and control the flow of your program.
function validation(){
if(fname_validate() && lname_validate() && month_validate(myForm) && date_validate(myForm) && year_validate()){
return true;
}
return false;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
javascript onchange function not working
Javascript onchange function not working on select tag
AngularJS/Javascript dropdown “onchange” function is not working
Input onchange javascript function call not working in Safari
Javascript: checkbox onchange/onclick function not working
JavaScript function Not Working with onchange attribute of input tag
onchange in javascript not working
Onchange is not working with Javascript entry
JavaScript onChange for Date is not working
Javascript onchange select not working
Related Tags