Created
June 23, 2019 15:18
-
-
Save imparvez/5c3bbb63364a3f59fb1e5b36fa9d83de to your computer and use it in GitHub Desktop.
Simple Javascript Form Validation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>Simple Form Validation</title> | |
</head> | |
<body> | |
<form> | |
<input type="text" id="name" placeholder="Name"> | |
<span class="error">Please provide one value</span> | |
<br /> | |
<br /> | |
<input type="text" id="email" placeholder="Email"> | |
<span class="error-one">Please provide good email</span> | |
<br /> | |
<br /> | |
<input type="text" id="password" placeholder="Password"> | |
<span class="error-two">Please provide exact password</span> | |
<br /> | |
<br /> | |
<button type="button" onclick="formValidate(event)">Submit</button> | |
</form> | |
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function formValidate(e) { | |
e.preventDefault(); | |
var formValidity = true; | |
var name = $('#name'); | |
var email = $('#email'); | |
var password = $('#password'); | |
var error = $('.error'); | |
var errorOne = $('.error-one'); | |
var errorTwo = $('.error-two'); | |
var alphabetsRegex = /^[a-zA-Z]/g; | |
var emailRegex = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i; | |
// Check for empty string as this field is compulsory | |
if(name.val() === '') { | |
error.show(); | |
formValidity = false; | |
} else { | |
error.hide(); | |
formValidity = true; | |
} | |
// Check if this field is fully alphabets | |
if(!name.val().match(alphabetsRegex)) { | |
error.show(); | |
formValidity = false; | |
} else { | |
error.hide(); | |
formValidity = true; | |
} | |
if(email.val() === '') { | |
errorOne.show(); | |
formValidity = false; | |
} else { | |
errorOne.hide(); | |
formValidity = true; | |
} | |
if(!email.val().match(emailRegex)) { | |
errorOne.show(); | |
formValidity = false; | |
} else { | |
errorOne.hide(); | |
formValidity = true; | |
} | |
if(password.val() === '') { | |
errorTwo.show(); | |
formValidity = false; | |
} else { | |
errorTwo.hide(); | |
formValidity = true; | |
} | |
if(password.val().length < 8) { | |
errorTwo.show(); | |
formValidity = false; | |
} else { | |
errorTwo.hide(); | |
formValidity = true; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.error, | |
.error-one, | |
.error-two { | |
display: none; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment