Skip to content

Instantly share code, notes, and snippets.

@imparvez

imparvez/index.html

Created June 23, 2019 15:18
Show Gist options
  • Save imparvez/5c3bbb63364a3f59fb1e5b36fa9d83de to your computer and use it in GitHub Desktop.
Save imparvez/5c3bbb63364a3f59fb1e5b36fa9d83de to your computer and use it in GitHub Desktop.
Download ZIP
Simple Javascript Form Validation
Raw
index.html
<!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>
Raw
script.js
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;
}
}
Raw
style.css
.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