Registration form validation using javascript
Question
It is getting error in console please give me help.
It is a registration form with JavaScript validation.In this all the inputs are mandatory and email address entered should be in correct format.Also, the values entered in the password and confirm password should be same.And also after validating using javascript, display proper error message in text box where there is an error.It is not displaying error message too.
Thanks in Advance.
html file
<html>
<head>
<title>Registration Form..</title>
<link rel="stylesheet" href="style.css"/>
<script type="text/javascript" src="register.js"></script>
</head>
<body>
<div class="outerContainer">
<div class="header">
<h3>Registration Form</h3>
</div>
<div class="innerContainer">
<h5>Registration Form</h5>
<form name="registerform">
<ul>
<li>
<label>First Name:</label>
<input type="text" id="first" onKeyup="validate()"> <div id="errFirst"></div>
</li>
<li>
<label>Last Name:</label>
<input type="text" id="last" onkeyup="validate()"> <div id="errLast"></div>
</li>
<li>
<label>e-mail id:</label>
<input type="text" id="email" onkeyup="validate()"> <div id="errEmail"></div>
</li>
<li>
<label>User Id:</label>
<input type="text" id="uid" onkeyup="validate()"><div id="errUid"></div>
</li>
<li>
<label>Password:</label>
<input type="password" id="pwd" onkeyup="validate()"> <div id="errPwd"></div>
</li>
<li>
<label>Confirm Password:</label>
<input type="password" id="confirm" onkeyup="validate()"> <div id="errConfirm"></div>
</li>
<li>
<input type="button" value="register" id="create" onclick="validate(); finalValidate();"><div id="errFinal"></div>
</li>
</ul>
</form>
</div>
<div class="footer">
<h5>Copy rights @2017</h5>
</div>
</div>
</body>
</html>
// css file.
li{
list-style:none;
padding: 5px;
margin: 10px;
}
.outerContainer {
border: 1px solid;
width: 500px;
height: 550px;
margin: 10px auto;
background:#fffccc;
background:img;
}
.footer, .header {
text-align: center;
border: 1px solid;
margin: 5px;
padding: 5px;
background:#0000ff;
}
.footer {
font-size: 11px;
clear:both;
font-style:Mistral;
}
.innerContainer{
border: 1px solid;
text-align: center;
margin: 5px;
height:400;
overflow: scroll;
padding: 5px;
background-image:url("https://image.freepik.com/free-vector/blue-abstract-background-with-lights_1048-3309.jpg");
}
form{
background:#ffccaa;
display-block:center;
}
h5{
text-align:center;
color:#ff23ff;
}
label{
color: #464646;
text-shadow: 0 1px 0 #fff;
font-size: 14px;
font-weight: bold;
}
span{
color:#ff0000;
}
//javascript file..
var divs=new Array();
divs[0]="errFirst";
divs[1]="errLast";
divs[2]="errEmail";
divs[3]="errUid";
divs[4]="errPwd";
divs[5]="errConfirm";
function validate(){
var inputs=new Array();
inputs[0]=document.getElementById('first').value;
inputs[1]=document.getElementById('last').value;
inputs[2]=document.getElementById('email').value;
inputs[3]=document.getElementById('uid').value;
inputs[4]=document.getElementById('pwd').value;
inputs[5]=document.getElementById('confirm').value;
var errors= new Array();
errors[0]="<span>Please enter your First name!</span>";
errors[1]="<span>Please enter your Last name!</span>";
errors[2]="<span>Please enter your e-mail-id!</span>";
errors[3]="<span>Please enter your User Id!</span>";
errors[4]="<span>Please enter your Password!</span>";
errors[5]="<span>Please enter your Confirm Password!</span>";
for(i in inputs){
var errMsg=errors[i];
var divMsg=divs[i];
if(inputs[i]=="")
document.getElementById(divMsg).innerHTML=errMsg;
else if(i==2){
var atpos=inputs[i].indexOf("@");
var dotpos=inputs[i].lastIndexOf(".");
if(atpos<1 || dotpos<atpos+2 || dotpos+2>= inputs[i].length)
document.getElementById('errEmail').innerHTML="<span>Enter Valid e-mail adderss!!</span>";
else
document.getElementById(divMsg).innerHTML="OK!";
}else if(i==5){
var ff=document.getElementById('pwd').value;
var ss=document.getElementById('confirm').value;
if(ss!=ff)
document.getElementById("errConfirm").innerHTML="<span>Your password doesnot match..!!</span>";
else
document.getElementById(divMsg).innerHTML="OK!";
}else
document.getElementById(divMsg).innerHTML="OK!";
}
}
function finalValidate()
{
var count = 0;
for(i=0;i<6;i++)
{
var divMsg = divs[i];
if(document.getElementById(divMsg).innerHTML == "OK!")
count = count + 1;
}
if(count == 6)
document.getElementById("errFinal").innerHTML = "All the data you entered is correct!!!";
else
document.getElementById("errFinal").innerHTML="Please enter all the required fields.!!";
}
1 answers
solution1
0 2017-03-03 06:36:49
A couple of typos in code because of which you got error in console,
In HTML file,
<div id="errLirst"></div>
Change the ID value to errLast like you have given in JS file
document.getElementById("divMsg").innerHTML="OK!";
Remove the quotes for the divMsg id, since divMsg is a variable
In JS File,
vat dotpos=inputs[i].lastIndexOf(".");
Declarative type for the variable dotpos is var not var.
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
Form validation using javascript (Registration Form with formatting)
JavaScript Validation Registration Form
Student Registration Form Validation in JavaScript
State validation in a JavaScript registration form
registration form using javascript
Javascript validation is not working in html registration form
PHP inside Javascript in a registration form (for validation)
Problems with form validation Javascript on a registration style page
send registration Form to php and validation by javascript
Registration form using javascript and php
Related Tags