I am trying to validate a form before submitting. The following are the validation constraints:
- Name, address should not be empty
- Phone number should be any 10 digit number
- email should be a valid email address
- One preference should be selected from the dropdown
- At-least one hobby should be selected
- As soon as the user selects a date, His age should be displayed in years and months, right beside the input field
If there are errors in validation, the data should not be submitted and error messages should come up right beside the respective input fields and whatever the user has entered should still be visible (the page should not refresh) so that the user can modify the entry. This is my form.
<form name="f1" action="#" onsubmit="return validateForm()">
<div class="container">
<div class="row my-1">
<div class="col-md-2">
Name :
</div>
<div class="col-md-10">
<input type="text" name="name" id="name"/>
<span id="namevald"></span>
</div>
</div>
<div class="row my-1">
<div class="col-md-2">
Address :
</div>
<div class="col-md-10">
<textarea name="address" id="address"></textarea>
<span id="addressvald"></span>
</div>
</div>
<div class="row my-1">
<div class="col-md-2">
Phone :
</div>
<div class="col-md-10">
<input type="tel" name="phone" id="phone"/>
<span id="phonevald"></span>
</div>
</div>
<div class="row my-1">
<div class="col-md-2">
Email :
</div>
<div class="col-md-10">
<input type="text" name="email" id="email"/>
<span id="emailvald"></span>
</div>
</div>
<div class="row my-1">
<div class="col-md-2">
Preferences :
</div>
<div class="col-md-10">
<select name="preferences" id="preferences">
<option value="" selected>Select a preference..</option>
<option value="pref1">Preference 1</option>
<option value="pref2">Preference 2</option>
<option value="pref3">Preference 3</option>
<option value="pref4">Preference 4</option>
<option value="pref5">Preference 5</option>
<option value="pref6">Preference 6</option>
<option value="pref7">Preference 7</option>
<option value="pref8">Preference 8</option>
<option value="pref9">Preference 9</option>
<option value="pref10">Preference 10</option>
</select>
<span id="preferencesvald"></span>
</div>
</div>
<div class="row my-1">
<div class="col-md-2">
Hobbies :
</div>
<div class="col-md-10">
<ul>
<li><label for="chk1"><input type="checkbox" name="chk" id="chk1">First</label></li>
<li><label for="chk2"><input type="checkbox" name="chk" id="chk2">Second</label></li>
<li><label for="chk3"><input type="checkbox" name="chk" id="chk3">Third</label></li>
<li><label for="chk4"><input type="checkbox" name="chk" id="chk4">Fourth</label></li>
<li><label for="chk5"><input type="checkbox" name="chk" id="chk5">Fifth</label></li>
</ul>
<span id="hobbiesvald"></span>
</div>
</div>
<div class="row my-1">
<div class="col-md-2">
DOB :
</div>
<div class="col-md-10">
<input type="date" name="date" id="date" onchange="ageCalculate()"/>
<span id="datevald"></span>
</div>
</div>
<div class="row my-1">
<div class="col-md-12">
<input type="submit" value="Submit.."/>
</div>
</div>
</div>
</form>
and this is my javascript
function validateHobbies(){
var chklist = document.getElementsByName('chk');
var n = chklist.length;
for(var i = 0; i < n; i++){
if(chklist[i].checked) return true;
}
return false;
}
function validatePreferences(){
var e = document.getElementByID('preferences');
return (e.options[e.selectedIndex].value == "")? false : true;
}
function validatePhone(){
var pat = /\d+$/;
return (pat.test(document.getElementByID('phone').value))? true : false;
}
function validateAddress(){
return (document.getElementByID('address').value.trim() == "")? false : true;
}
function validateName(){
return (document.getElementByID('name').value.trim() == "")? flase : true;
}
function validateEmail(){
var pat = /^[a-z0-9!#$%&*+\/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&*+\/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/;
return (pat.test(document.getElementByID('email').value))? true : false;
}
function validateForm(){
var isNameValid = validateName();
var isAddressValid = validateAddress();
var isPhoneValid = validatePhone();
var isPreferencesValid = validatePreferences();
var isHobbiesValid = validateHobbies();
var isEmailValid = validateEmail();
document.getElementByID('namevald').innerHTML = (isNameValid)? "" : "Name shouldn't be empty";
document.getElementByID('addressvald').innerHTML = (isAddressValid)? "" : "Address shouldn't be empty";
document.getElementByID('phonevald').innerHTML = (isPhoneValid)? "" : "Enter valid mobile no";
document.getElementByID('preferencesvald').innerHTML = (isPreferencesValid)? "" : "Select a preference";
document.getElementByID('hobbiesvald').innerHTML = (isHobbiesValid)? "" : "Select atleast 1 hobby";
document.getElementByID('emailvald').innerHTML = (isEmailValid)? "" : "Enter a valid email";
return (isNameValid && isAddressValid && isPhoneValid && isPreferencesValid && isHobbiesValid && isEmailValid);
}
function ageCalculate(){
var dob = document.getElementByID('date').value.split("-");
var by = parseInt(dob[0],10);
var bm = parseInt(dob[1],10);
var today = new Date();
var cy = today.getFullYear();
var cm = today.getMonth();
var months = (cy-by)*12-bm+cm;
document.getElementByID('datevald').innerHTML = "" + months/12 + "Years" + months%12 + "Months";
}
The validation isn't working. Irrespective of the inputs, the form just submits and refreshes. No validation error messages as well. I suspected that the mistake might be either in the onsubmit attribute in the form opening tag or the submit type input at the end, so I've tried event.preventDefault() and multiple other solutions for the form tag and the submit button that i found online but none seem to be working. What exactly is the problem here? Thanks in advance.
tags?