Submit Button: When user clicks on the submit button, your validation logic will
ID: 3749955 • Letter: S
Question
Submit Button: When user clicks on the submit button, your validation logic will run and display error messages on the screen if there are data issues Registration e Username is required Password has to be at least 8 characters e abcd is not a valid date. e abcd is not a valid phone number. Username Password First Name John Last Name Date of Birth abcd (At least 8 characters) (At least 8 characters) Smith In MMDD/YYYY format abc@gmail.com Phone Number abcd (Optional, in XXX-XXX-XXXX format) Submit Reset If there are no data issues, you can just use "alert to print a success message Registration Username Password First Name John Last Name Smith Date of Birth 01/01/1987 In MM/DD Emailabc@gmail.com Phone Number 317-333-4456 (Optional, ir (At least 8 characters) (At least 8 ohnsmith Your registration has been processed. OK Submit Reset Reset Button: Clears all the fields on the screen, including any error messagesExplanation / Answer
Java script code: reset is not supporting few browsers.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#error
{
color:red;
}
</style>
<title>Welcome To Registration Form</title>
<script>
function registration()
{
var hasErrors = false;
var errorMsg = new Array();
var userName= document.getElementById("userName").value;
var password= document.getElementById("password").value;
var firstName= document.getElementById("firstName").value;
var lastName= document.getElementById("lastName").value;
var dob= document.getElementById("dob").value;
var email= document.getElementById("email").value;
var phNum= document.getElementById("phNum").value;
//email id expression code
var letters = /^[A-Za-z]+$/;
var filter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
var phoneno = /^(?([0-9]{3}))?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
if(userName=='')
{
hasErrors = true;
errorMsg.push("Username is required");
}
else if(!letters.test(userName))
{
hasErrors = true;
errorMsg.push('Name field required only alphabet characters');
}
if(password=='')
{
hasErrors = true;
errorMsg.push('Please enter Password');
}
else if(document.getElementById("password").value.length <8)
{
hasErrors = true;
errorMsg.push('Password has to be atleast 8 characters');
}
if(firstName=='')
{
hasErrors = true;
errorMsg.push('First Name is required.');
}
else if(!letters.test(firstName))
{
hasErrors = true;
errorMsg.push('First Name field required only alphabet characters');
}
if(lastName=='')
{
hasErrors = true;
errorMsg.push('Last Name is required.');
}
else if(!letters.test(lastName))
{
hasErrors = true;
errorMsg.push('Last Name field required only alphabet characters');
}
if(email=='')
{
hasErrors = true;
errorMsg.push('Email is required.');
}
else if (!filter.test(email))
{
hasErrors = true;
errorMsg.push('Invalid email');
}
if(document.getElementById("phNum").value.length >1)
{
if (! (phNum.valueOf().match(phoneno)))
{
hasErrors = true;
errorMsg.push(phNum+' is not a valid phone number.');
}
}
if(hasErrors==false)
{
hasErrors = true;
alert('Your registration has been processed');
}
var messageHtml = "";
errorMsg.forEach(function (message) {
messageHtml += "<li>" + message + "</li>";
});
document.getElementById("error").innerHTML = messageHtml;
}
/*
function myFunction() {
document.getElementById("myform").reset();
}*/
</script>
</head>
<body>
<!-- Main div code -->
<div id="main">
<div>
<h2>Registration</h2>
<ul id="error">
</div>
<br>
<!-- create account div -->
<div class="login">
<table cellspacing="1" cellpadding="2" border="0">
<tr>
<td>Username :</td>
<td><input type="text" id="userName" /> (At least 8 characters)</td>
</tr>
<tr>
<td>Password :</td>
<td><input type="password"id="password"/> (At least 8 characters)</td>
</tr>
<tr>
<td>First Name :</td>
<td><input type="text" id="firstName"/></td>
</tr>
<tr>
<td>Last Name :</td>
<td><input type="text" id="lastName"/></td>
</tr>
<tr>
<td>Date of Birth :</td>
<td><input type="text" id="dob"/>In MM/DD/YYYY format</td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" id="email"/></td>
</tr>
<tr>
<td>Phone Number :</td>
<td><input type="text" id="phNum"/>(Optinal,in XXX-XXX-XXXX format)</td>
</tr>
<tr>
<td>
<input type="submit" value="Submit" />
<input type="reset" value="Reset" /></td>
</tr>
</table>
</div>
<!-- create account box ending here.. -->
</div>
<!-- Main div ending here... -->
</body>
</html>