Edit the code to add a password and use json.stringify to store all the info correctly. Not as an object but to convert it to a string representation.
Edit the code to add a password and use json.stringify to store all the info correctly. Not as an object but to convert it to a string representation.
Existing code:
register.html
<html>
<head>
<title>
Registration Page
</title>
<script src="./js/register.js"></script>
</head>
<body
<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;
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;
}
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;
}
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;
}
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;
}
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;
}
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;
}
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 {
document.getElementById('results').innerHTML = outputTable;
}
const User = {
email: document.getElementById('email').value,
phone: document.getElementById('phone').value,
address: document.getElementById('address').value,
city: document.getElementById('city').value,
state: document.getElementById('state').value,
zip: document.getElementById('zip').value,
conatct: document.getElementById('contact').value,
TandC: document.getElementById('terms').checked ? "Accepted" : "Not Accpeted"
}
storeData(User);
}
function storeData(User) {
if (typeof(Storage) !== "undefined") {
localStorage.setItem(User.email, User);
} else {
console.log("Sorry, your browser does not support Web Storage...");
}
}
Step by step
Solved in 2 steps
