Issue
This Content is from Stack Overflow. Question asked by NiceBench
Trying to test out some JS form validation. Not sending this information to any database or anything; just trying to hammer down the format for now. All my regex checks are working fine except for birth
It seems as though there is something wrong in the regex check because when I put another check in there with a different format, it works fine. I want them to enter the birthday in mm/dd/yyyy fashion and display the proper error if not. Any help is appreciated!
<!DOCTYPE html>
<html lang = 'en'>
<head>
<meta charset="UTF-8">
<style>
h1 {text-align: center;}
p {text-align: center;}
div {text-align: center;}
</style>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" >
<body>
<div class="menu-bar">
<ul>
<li class="active"><a href="/"><i class="fa fa-home" aria-hidden="true"></i>Home</a></li>
<li><a href="#"><i class="fa fa-laptop" aria-hidden="true"></i>My Classes</a>
<div class="sub-menu1">
<ul>
<li class="hover-me"><a href="http://roneaglin.online/cop4813/">COP4813</a><i class="fa fa-angle-right"></i>
<div class="sub-menu2">
<ul>
<li><a href="/Classes/COP4813/Assignments/assignments-1">Assignment 1</a></li>
<li><a href="/Classes/COP4813/Assignments/assignments-2">Assignment 2</a></li>
<li><a href="#">Assignment 3</a></li>
</ul>
</div>
<li><a href="#">CEN4801</a></li>
<li><a href="#">CNT3104</a></li>
<li><a href="#">CEN3722</a></li>
</ul>
</div>
</li>
<li><a href="#"><i class="fa fa-user" aria-hidden="true"></i>My Sites</a>
<div class="sub-menu1">
<ul>
<li><a href="https://www.linkedin.com/in/john-many-261b04196/">Linkedin</a></li>
<li><a href="https://www.google.com/">Google</a></li>
<li><a href="https://www.reddit.com/">Reddit</a></li>
<li><a href="https://store.steampowered.com/">Steam</a></li>
</ul>
</div>
</li>
</ul>
</div>
<center><h1>Web-Creation: JavaScript Form Validation</h1></center>
<title>Assignment 3</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<script>
function printError(elemId, hinstMsg){
document.getElementById(elemId).innerHTML = hinstMsg;
}
function validateForm(){
var name = document.contactForm.name.value;
var email = document.contactForm.email.value;
var mobile = document.contactForm.mobile.value;
var address = document.contactForm.address.value;
var birth = document.contactForm.birth.value;
var nameErr = emailErr = mobileErr = addressErr = birthErr = true;
if(name == "") {
printError("nameErr", "Please enter your name");
} else {
var regex = /^[a-zA-Zs]+$/;
if(regex.test(name) === false) {
printError("nameErr", "Please enter a valid name");
} else {
printError("nameErr", "");
nameErr = false;
}
}
if(email == "") {
printError("emailErr", "Please enter your email address");
} else {
// Regular expression for basic email validation
var regex = /^S+@S+.S+$/;
if(regex.test(email) === false) {
printError("emailErr", "Please enter a valid email address");
} else{
printError("emailErr", "");
emailErr = false;
}
}
if(mobile == "") {
printError("mobileErr", "Please enter your mobile number");
} else {
var regex = /^[1-9]d{9}$/;
if(regex.test(mobile) === false) {
printError("mobileErr", "Please enter a valid 10 digit mobile number");
} else{
printError("mobileErr", "");
mobileErr = false;
}
}
if(address == "") {
printError("addressErr", "Please enter your Street Address");
} else {
var regex = /^[a-zA-Zs]+$/;
if(regex.test(address) === false) {
printError("addressErr", "Please enter a valid street address");
} else {
printError("addressErr", "");
addressErr = false;
}
}
if(birth == "") {
printError("birthErr", "Please enter your birthday");
} else {
var regex = '/^((0?[1-9]|1[012])[- /.](0?[1-9]|[12][0-9]|3[01])[- /.](19|20)?[0-9]{2})*$/';
if(regex.test(birth) === false) {
printError("birthErr", "Please enter a valid birthday");
} else {
printError("birthErr", "");
birthErr = false;
}
}
if((nameErr || emailErr || mobileErr || addressErr || birthErr) == true){
return false;
} else{
var dataPreview = "You have entered the following information: n" +
"Full Name: " + name + "n" +
"Email Address: " + email + "n" +
"Mobile Number: " + mobile + "n" +
"Address: " + address + "n" +
"Birthday: " + birth + "n";
alert(dataPreview);
}
}
</script>
<form name="contactForm" onsubmit="return validateForm()" action="/submit-confirmation">
<h2>Application Form</h2>
<div class="row">
<label>Full Name</label>
<input type="text" name="name" placeholder="Full Name (First & Last)">
<div class="error" id="nameErr"></div>
</div>
<div class="row">
<label>Email Address</label>
<input type="text" name="email">
<div class="error" id="emailErr"></div>
</div>
<div class="row">
<label>Mobile Number</label>
<input type="text" name="mobile" maxlength="10">
<div class="error" id="mobileErr"></div>
</div>
<div class="row">
<label> Street Address</label>
<input type="text" name="address" maxlength="40">
<div class="error" id="addressErr"></div>
</div>
<div class="row">
<label>Birthday</label>
<input type="text" name="birth" maxlength="10" placeholder="(MM/DD/YYYY)">
<div class="error" id="birthErr"></div>
</div>
<div class="row">
<label>Comments</label>
<input type="text" name="comment" maxlength="15" />
</div>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
</html>
Solution
Your does not validate leap years correctly, you can try to use the regex below, it can use to take dd/mm/yyyy, dd-mm-yyyy or dd.mm.yyyy.
^(?:(?:31(/|-|.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(/|-|.)(?:0?[13-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(/|-|.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(/|-|.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$
You can try this regex here
This Question was asked in StackOverflow by NiceBench and Answered by Ferri Adi Prasetya It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.