Create a User object to store the data and use the email address as the key and the user object as the value. Existing code: Register.html Registration Page Email: Phone: Address: City: State: ZIP Code: Contact Me: Text Email Do not contact me Terms and condition Register.js function validateData() { var outputTable = ""; var validInformation = true; // validate the email id var mailformat = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; if(document.getElementById('email').value.match(mailformat)) { outputTable += "EMAIL "+document.getElementById('email').value+""; } else { outputTable += "EMAIL Invalid email"; validInformation = false; } // validate phone number var regx = /^[6-9]\d{9}$/ ; if(regx.test(document.getElementById("phone").value)) { outputTable += "phonenumber "+document.getElementById('phone').value+""; } else { outputTable += "phonenumber Invalid phone "; validInformation = false; } //validate address, it cannot be empty if(document.getElementById('address').value != "") { outputTable += "address "+document.getElementById('address').value+""; } else { outputTable += "address Address cannot be empty"; validInformation = false; } //validate city, it cannot be empty if(document.getElementById('city').value != "") { outputTable += "city "+document.getElementById('city').value+""; } else { outputTable += "address city cannot be empty"; validInformation = false; } // validate zipcode: i am using the us zip code format if(/^\d{5}(-\d{4})?$/.test(document.getElementById('zip').value)) { outputTable += "zip "+document.getElementById('zip').value+""; } else { outputTable += "zip Invalid zip"; validInformation = false; } // check if the radio button is checked or not if(document.getElementById('contact').checked == true) { outputTable += "contact"+document.getElementById('contact').value+""; } else{ outputTable += "contactNot set"; validInformation = false; } // check if the check box is checked if(document.getElementById('terms').checked) { outputTable += "Terms and condtionAccepted"; } else{ outputTable += "Terms and condtionNot Accepted"; validInformation = false; } outputTable += ""; if(validInformation) { document.getElementById('results').hidden = true; alert("The users account has been registered"); } else{ // alert(); document.getElementById('results').innerHTML = outputTable; } }
Create a User object to store the data and use the email address as the key and the user object as the value.
Existing code:
Register.html
<html>
<head>
<title>
Registration Page
</title>
<script src="./js/register.js"></script>
</head>
<body bgcolor="Lightskyblue">
<br />
<br />
<form>
Email:
<input type="text" id="email" name="email"/> <br> <br>
Phone:
<input type="text" id="phone" name="phone"/> <br> <br>
Address:
<textarea id="address" name="address"> </textarea> <br> <br>
City:
<input type="text" id="city" name="city"/> <br> <br>
State:
<input type="text" id="state" name="state"/> <br> <br>
ZIP Code:
<input type="text" id="zip" name="zip"/> <br> <br>
Contact Me:
<input type="radio" id="contact" name="contact" value="text"/> Text
<input type="radio" id="contact" name="contact" value="email"/> Email
<input type="radio" id="contact" name="contact" value="do not contact"/> Do not contact me
<br><br>
<input type="checkbox" id="terms">Terms and condition
<br><br>
<input type="reset">
<input type="button" onclick="validateData()" value="Register">
</form>
<div id="results">
</div>
</body>
</html>
Register.js
function validateData()
{
var outputTable = "<table>";
var validInformation = true;
// validate the email id
var mailformat = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
if(document.getElementById('email').value.match(mailformat))
{
outputTable += "<tr><td>EMAIL </td><td>"+document.getElementById('email').value+"</td></tr>";
}
else
{
outputTable += "<tr><td>EMAIL </td><td>Invalid email</td></tr>";
validInformation = false;
}
// validate phone number
var regx = /^[6-9]\d{9}$/ ;
if(regx.test(document.getElementById("phone").value))
{
outputTable += "<tr><td>phonenumber </td><td>"+document.getElementById('phone').value+"</td></tr>";
}
else
{
outputTable += "<tr><td>phonenumber </td><td> Invalid phone </td></tr>";
validInformation = false;
}
//validate address, it cannot be empty
if(document.getElementById('address').value != "")
{
outputTable += "<tr><td>address </td><td>"+document.getElementById('address').value+"</td></tr>";
}
else
{
outputTable += "<tr><td>address </td><td>Address cannot be empty</td></tr>";
validInformation = false;
}
//validate city, it cannot be empty
if(document.getElementById('city').value != "")
{
outputTable += "<tr><td>city </td><td>"+document.getElementById('city').value+"</td></tr>";
}
else
{
outputTable += "<tr><td>address </td><td>city cannot be empty</td></tr>";
validInformation = false;
}
// validate zipcode: i am using the us zip code format
if(/^\d{5}(-\d{4})?$/.test(document.getElementById('zip').value))
{
outputTable += "<tr><td>zip </td><td>"+document.getElementById('zip').value+"</td></tr>";
}
else
{
outputTable += "<tr><td>zip </td><td> Invalid zip</td></tr>";
validInformation = false;
}
// check if the radio button is checked or not
if(document.getElementById('contact').checked == true)
{
outputTable += "<tr><td>contact</td><td>"+document.getElementById('contact').value+"</td></tr>";
}
else{
outputTable += "<tr><td>contact</td><td>Not set</td></tr>";
validInformation = false;
}
// check if the check box is checked
if(document.getElementById('terms').checked)
{
outputTable += "<tr><td>Terms and condtion</td><td>Accepted</td></tr>";
}
else{
outputTable += "<tr><td>Terms and condtion</td><td>Not Accepted</td></tr>";
validInformation = false;
}
outputTable += "</table>";
if(validInformation)
{
document.getElementById('results').hidden = true;
alert("The users account has been registered");
}
else{
// alert();
document.getElementById('results').innerHTML = outputTable;
}
}
Trending now
This is a popular solution!
Step by step
Solved in 2 steps
