Answer to Question #285130 in HTML/JavaScript Web Application for sai krishna

Question #285130

Create a basic user sign up form with input field validations.

● Use any of CSS framework or plain css properties

● Use Javascript for input validation

Expert's answer

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {box-sizing: border-box}


		.container {
			width: 400px;
			padding: 16px;
		}


		input[type=text], input[type=password] {
		  width: 100%;
		  padding: 15px;
		  margin: 5px 0 22px 0;
		  display: inline-block;
		  border: none;
		  background: #f1f1f1;
		}


		input[type=text]:focus, input[type=password]:focus {
		  background-color: #ddd;
		  outline: none;
		}


		hr {
		  border: 1px solid #f1f1f1;
		  margin-bottom: 25px;
		}


		.registerbtn {
		  background-color: #4CAF50;
		  color: white;
		  padding: 16px 20px;
		  margin: 8px 0;
		  cursor: pointer;
		  width: 100%;
		  opacity: 0.9;
		}




	</style>
</head>
<body>
	<form class="formWithValid">
	  	<div class="container">


		    <h1>Sign Up</h1>
		    <hr>
		    <label for="email"><b>Email</b></label>
		    <input type="text" placeholder="Enter Email" name="email">


		    <label for="psw"><b>Password</b></label>
		    <input type="password" placeholder="Enter Password" name="psw">


		    <label for="psw-repeat"><b>Repeat Password</b></label>
		    <input type="password" placeholder="Repeat Password" name="psw-repeat">
		    <hr>
		    <button type="submit" class="registerbtn">Register</button>
	  	</div>
	</form>


<script type="text/javascript">


var form = document.querySelector('.formWithValid')
var registerBtn = form.querySelector('.registerbtn')
var email = form.querySelector('[name="email"]')
var psw = form.querySelector('[name="psw"]')
var psw_reap = form.querySelector('[name="psw-repeat"]')






form.addEventListener('submit', function (event) {
    if (!email.value) {
    alert(email.name + ' cannot be blank');
    return
  }
  	if (!psw.value) {
    alert(psw.name + ' cannot be blank');
    return
  }	
  	if (!psw_reap.value) {
    alert(psw_reap.name + ' cannot be blank');
    return
  }
  	if (psw_reap.value != psw.value) {
  		alert('passwords not match');
  		return
  	}
})


</script>	
</body>
</html>

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

Answer to Question #285130 in HTML/JavaScript Web Application for sai krishna

Comments

Leave a comment

Related Questions