I am trying to save data to a table, but it is supposed to submit if everything is good
JAVASCRIPT:
const formm = document.querySelector('#CreateAccount')
const school = document.querySelector('#skool');
const username = document.querySelector('#username');
const email = document.querySelector('#email');
const pwd = document.querySelector('#password');
const conf = document.querySelector('#confpassword');
formm.addEventListener("submit", (event) => {
validateForm();
if(result == true){
formm.submit();
console.log(2);
}else{
event.preventDefault();
console.log(30);
}
console.log(30);
});
function isFormValid(){
const inputscontainers = document.querySelectorAll('.inputs')
let result=true;
inputscontainers.forEach((container) => {
if(container.classList.contains("error")){
return false;
}})
return result;
}
function validateForm(){
if(username.value.trim() == ''){
setError(username, 'Name cannot be empty');
}else if(username.value.trim() < 5){
setError(username, 'Idrc');
console.log(3);
}
else{
setSuccess(username);
}
if(email.value.trim() == ''){
setError(email, 'You forgot to fill in your email.');
}
else if(isEmailValid(email.value)){
setSuccess(email);
}else{
setError(email, "Provide a valid email");
}
if(pwd.value.trim()==''){
setError(pwd, "Password can't be empty");
}else if(pwd.value.trim().length<6 || pwd.value.trim().length>20){
setError(pwd, 'Length must be minimum 6 characters and max 20.');
}else{
setSuccess(pwd);
}
if(conf.value.trim() == ''){
setError(conf, 'This is an empty password');
}else if(conf.value !== pwd.value){
setError(conf, 'Passwords dont match');
}
else{
setSuccess(conf);
}
}
function setError(elementr, errorMessage){
const parents = elementr.parentElement;
parents.classList.add("error");
parents.classList.remove("success");
const paragraph = parents.querySelector('p').textContent = errorMessage;
}
function setSuccess(elementr){
const parents = elementr.parentElement;
parents.classList.add("success");
parents.classList.remove("error");
}
function isEmailValid(email){
const reg =/^(([^<>()[\]\.,;:\s#\"]+(\.[^<>()[\]\.,;:\s#\"]+)*)|(\".+\"))#(([^<>()[\]\.,;:\s#\"]+\.)+[^<>()[\]\.,;:\s#\"]{2,})$/i;
return reg.test(email);
}
HTML
<form id="CreateAccount" action="techer.php" method="GET">
<div class="main">
<div class="Title">
<h1>Enter your details.</h1>
</div>
<div class="inputs">
<label for="skool">SchoolName:</label>
<input type="text" id="skool" placeholder ="Put the school name" name="skool"></input>
<i class="fa-solid fa-circle-xmark"></i>
<i class="fa-solid fa-circle-check"></i>
<p>Error Message</p>
</div>
<div class="inputs">
<label for="username">Username:</label>
<input type="text" id="username" placeholder ="Username" name="username">
<i class="fa-solid fa-circle-xmark"></i>
<i class="fa-solid fa-circle-check"></i>
<p id="p">Error Message</p>
</div>
<div class="inputs">
<label for="password">Password</label>
<input type="password" id="password" placeholder =" Password" name="password"></input>
<i class="fa-solid fa-circle-xmark"></i>
<i class="fa-solid fa-circle-check"></i>
<p id="p">Error Message</p>
</div>
<div class="inputs">
<label for="confpassword">Confirm Password</label>
<input type="password" id="confpassword" placeholder =" Confirm Password" name="confpassword"></input>
<i class="fa-solid fa-circle-xmark"></i>
<i class="fa-solid fa-circle-check"></i>
<p>Error Message</p>
</div>
<div class="inputs">
<label for="email">Email:</label>
<input type="email" id="email" placeholder ="Email" name="email"></input>
<i class="fa-solid fa-circle-xmark"></i>
<i class="fa-solid fa-circle-check"></i>
<p>Error Message</p>
</div>
<button class="submitbtn" type="submit">Submit</button>
</div>
</div>
</form>
As far as the eye can see, there are no errors, and it is not saving data to my php database, which is worrying. My expected result is for, when everything is correct, the from to be submitted then redirected to a php file! But what is happening, even if everything in the form is correct, it wont submit. Please HELP!!
Try adding, at the end of validateForm function:
return isFormValid();
then in your submit listener, change
validateForm();
to
let result = validateForm();
Related
I created the function to display the alert message on keypress then if the user does not include "#" in the field, it should keep showing but once "#" is added then the alert message should disappear.
Here is the code:
function makeHappen() {
var take = document.getElementById('emailID');
var a = document.getElementById("alert3second");
if (!take.value.indexOf("#") > -1) {
a.style.display = "block"
} else {
a.style.display = "none"
}
}
<div class="form-group">
<input type="email" class="form-control font-weight-bold" placeholder="YOUR EMAIL ADDRESS" id="emailID" onclick="formValidator2()" name="budget3" onkeypress="makeHappen()" required>
<div id="alert3" class="alert-danger">
<i class="fa fa-warning pr-2 pt-1"></i>
Please Your email address is required
</div>
<div id="alert3second" class="alert-danger">
<i class="fa fa-warning pr-2 pt-1"></i>
Enter a valid email
</div>
</div>
instead of using onkeypress use onkeyup
The onkeyup attribute fires when the user releases a key (on the
keyboard).
https://www.w3schools.com/tags/ev_onkeyup.asp
and add style="display:none;" to alert3second div to make the message disappears when there is no value in the input
function makeHappen() {
var take = document.getElementById('emailID');
var a = document.getElementById("alert3second");
if (take.value.indexOf("#") == -1) {
a.style.display = "block"
} else {
a.style.display = "none"
}
}
<div class="form-group">
<input type="email" class="form-control font-weight-bold"
placeholder="YOUR EMAIL ADDRESS"
id="emailID" onclick="formValidator2()"
name="budget3" onkeyup="makeHappen()" required>
<div id="alert3" class="alert-danger">
<i class="fa fa-warning pr-2 pt-1"></i>
Please Your email address is required
</div>
<div id="alert3second" class="alert-danger" style="display:none;">
<i class="fa fa-warning pr-2 pt-1"></i>
Enter a valid email
</div>
</div>
The logic of your if statement needs to be made clearer:
if (take.value.indexOf('#') == -1)
You can test this by running your current if statement like so:
> !"hello".indexOf("#") > -1
true
> !"hello#".indexOf("#") > -1
true
I would probably point out that you should name your variables a bit better. Maybe instead of 'take' you should call it emailID?
function validateEmail() {
var emailId = document.getElementById('emailID').value;
var errorMsg = document.getElementById('alert3second');
if (emailId.indexOf('#') == -1) {
errorMsg.style.display = 'block';
} else {
errorMsg.style.display = 'none';
}
}
My form validation works perfectly, but after the form is valid it dosen't proceed to the next page
when i click on the submit button
Here is the html for the code:
<div class="header">
<h2>Create Account</h2>
</div>
<form id="form" class="form" action="Iphone.html" method="post">
<div class="form-control">
<label for="username">Username</label>
<input type="text" placeholder="Drake" id="username" />
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="form-control">
<label for="username">Email</label>
<input type="email" placeholder="applehub#gmail.com" id="email" />
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="form-control">
<label for="username">Password</label>
<input type="password" placeholder="Password" id="password"/>
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="form-control">
<label for="username">Password check</label>
<input type="password" placeholder="Password two" id="password2"/>
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<input type="submit" value="Submit" name="">
<p>Have an account? Login.</p>
</form>
</div>
Here is the Javascript, i put the submit button e.preventDefault(); but i can't turn it of when the form is valid:
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');
form.addEventListener('submit', e => {
e.preventDefault();
checkInputs();
});
function checkInputs() {
// trim to remove the whitespaces
const usernameValue = username.value.trim();
const emailValue = email.value.trim();
const passwordValue = password.value.trim();
const password2Value = password2.value.trim();
if(usernameValue === '') {
setErrorFor(username, 'Username cannot be blank');
} else {
setSuccessFor(username);
}
if(emailValue === '') {
setErrorFor(email, 'Email cannot be blank');
} else if (!isEmail(emailValue)) {
setErrorFor(email, 'Not a valid email');
} else {
setSuccessFor(email);
}
if(passwordValue === '') {
setErrorFor(password, 'Password cannot be blank');
} else {
setSuccessFor(password);
}
if(password2Value === '') {
setErrorFor(password2, 'Password2 cannot be blank');
} else if(passwordValue !== password2Value) {
setErrorFor(password2, 'Passwords does not match');
} else{
setSuccessFor(password2);
}
}
function setErrorFor(input, message) {
const formControl = input.parentElement;
const small = formControl.querySelector('small');
formControl.className = 'form-control error';
small.innerText = message;
}
function setSuccessFor(input) {
const formControl = input.parentElement;
formControl.className = 'form-control success';
}
function isEmail(email) {
return /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
}```
You need to manually redirect after you have checked that the validation is correct.
To redirect to another page, you can use:
window.location = "http://www.yoururl.com";
If the application is SPA , use browserhistory.push('/uri');
This is caused by for e.preventDefault();. If this function gets called, the inital action from the form gets 'disabled'.
I think in this situation the best case is to work with flags.
So the solution could look like this:
let is_form_checked = false;
form.addEventListener('submit', e => {
if(!is_form_checked) {
e.preventDefault();
checkInputs();
is_form_checked = true;
//resubmit
}
});
$(function() {
if (localStorage.chkbx && localStorage.chkbx != '') {
$('#modal_login_remember').attr('checked', 'checked');
$('#modal_login_email').val(localStorage.usrname);
$('#modal_login_password').val(localStorage.pass);
} else {
$('#modal_login_remember').removeAttr('checked');
$('#modal_login_email').val('');
$('#modal_login_password').val('');
}
$('#modal_login_remember').click(function() {
if ($('#modal_login_remember').is(':checked')) {
// save username and password
localStorage.usrname = $('#modal_login_email').val();
localStorage.pass = $('#modal_login_password').val();
localStorage.chkbx = $('#modal_login_remember').val();
} else {
localStorage.usrname = '';
localStorage.pass = '';
localStorage.chkbx = '';
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<p style="text-align: center"><i>Enter your email ID and password to log in to Help.</i></p>
<div id="errormsg" style="display: none; color:red;text-align: center; padding-bottom: 1.2rem;"> Invalid token or login credentials, please log in again.</div>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-envelope"></i>
</span>
<input type="email" id="modal_login_email" name="modal_login_email" class="form-control" placeholder="Enter email" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-unlock-alt"></i>
</span>
<input type="password" id="modal_login_password" name="modal_login_password" class="form-control" placeholder="Password" />
</div>
</div>
<label class="custom-control custom-checkbox">
<input type="checkbox" id="modal_login_remember" class="custom-control-input" />
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Remember me</span>
</label>
<div class="modal-footer">
<input type="button" onclick="login(document.getElementById('modal_login_email').value,document.getElementById('modal_login_password').value);" class="btn btn-primary" value="Login" style="background-color: #19659d; border-color: #19659d;" />
</div>
If a user click on remember checkbox at the time of login, the details should to be saved in localstorage. If user tries to login again user details should autocomplete (if user types few letter of his name, name and password should autocomplete). There is no api for it, so i need to do it from front-end.
The value are getting stored in localstorage but the autocomplete is not working ho to approach it.
You can use this code, and you can define the local storage as an object it's would be nic to have.
$(function() {
if (localStorage.chkbx && localStorage.getItem(chkbx) !=='') {
$('#modal_login_remember').attr('checked', 'checked');
$('#modal_login_email').val(localStorage.getItem(usrname));
$('#modal_login_password').val(localStorage.getItem(pass));
} else {
$('#modal_login_remember').removeAttr('checked');
$('#modal_login_email').val('');
$('#modal_login_password').val('');
}
$('#modal_login_remember').click(function() {
if ($('#modal_login_remember').is(':checked')) {
// save username and password
localStorage.setItem('usrname',$('#modal_login_email').val());
localStorage.setItem('pass',$('#modal_login_password').val());
localStorage.setItem('chkbx', $('#modal_login_remember').val());
} else {
localStorage.setItem('usrname', '');
localStorage.setItem('pass', '');
localStorage.setItem('chkbx', '');
}
});
});
my validation error message didnot show correctly.for example I insert value on Name input but validation error message of email was shown or when I insert value on phone input,validation of email was shown.I want when I insert value in specific input only the validation error message of it was shown.
<form class="contactForm" onsubmit="return validateContactForm();">
<div class="form-group">
<label for="name" class="label-login">Name</label>
<input type="text" class="form-control" id="name" autocomplete="off" />
<span id="namespan" class="text-danger"></span>
<i class="fa fa-user"></i>
</div>
<div class="form-group">
<label for="email" class="label-login">email</label>
<input type="email" class="form-control" id="email" autocomplete="off" />
<span id="emailspan" class="text-danger"></span>
<i class="fa fa-envelope"></i>
</div>
<div class="form-group">
<label for="phone" class="label-login">tell number </label>
<input type="text" class="form-control" id="phone" autocomplete="off" />
<span id="tellspan" class="text-danger"></span>
<i class="fa fa-phone"></i>
</div>
<div class="form-group">
<label for="message" class="label-login label-message">message</label>
<textarea class="form-control" rows="3" id="message" autocomplete="off"></textarea>
<span id="messagespan" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" class="btn btn-send center-block" value="send/>
</div>
</form>
$(document).ready(function () {
$(".contactForm input,.contactForm textarea").each(function () {
$(this).keyup(function () {
var pt = /^[\w.]+#[a-z0-9-]+\.[a-z]{2,6}/i;
if (!pt.test($("#email").val())) {
$("#emailspan").html("insert email correctly");
}
else {
$("#emailspan").text("");
}
if ($("#name").val().length < 3) {
$("#namespan").html("insert name correctly");
}
else {
$("#namespan").text("");
}
if ($("#phone").val().length < 12) {
$("#tellspan").html("insert phone correctly");
}
else {
$("#tellspan").text("");
}
if ($("#message").val().trim().length < 3) {
$("#messagespan").html("insert message correctly");
}
else {
$("#messagespan").text("");
}
});
});
});
function validateContactForm() {
var bool = true;
var pt = /^[\w.]+#[a-z0-9-]+\.[a-z]{2,6}/i;
if (!pt.test($("#email").val())) {
bool = false;
$("#emailspan").html("insert email correctly");
}
if ($("#name").val().length < 3) {
bool = false;
$("#namespan").html("insert name correctly");
}
if ($("#phone").val().length < 12 ) {
bool = false;
$("#tellspan").html("insert tell correctly");
}
if ($("#message").val().trim().length < 3) {
bool = false;
$("#messageSpan").html("insert message correctly");
}
return bool;
}
I found some issue in the form and updated here
Form send button does not close properly
.contactFormnot not added on form tag
$(document).ready(function () {
$(".contactForm input,.contactForm textarea").each(function () {
$(this).keyup(function () {
var pt = /^[\w.]+#[a-z0-9-]+\.[a-z]{2,6}/i;
if (!pt.test($("#email").val())) {
$("#emailspan").html("insert email correctly");
} else {
$("#emailspan").text("");
}
if ($("#name").val().length < 3) {
$("#namespan").html("insert name correctly");
} else {
$("#namespan").text("");
}
if ($("#phone").val().length < 12) {
$("#tellspan").html("insert phone correctly");
} else {
$("#tellspan").text("");
}
if ($("#message").val().trim().length < 3) {
$("#messagespan").html("insert message correctly");
} else {
$("#messagespan").text("");
}
});
});
});
function validateContactForm() {
var bool = true;
var pt = /^[\w.]+#[a-z0-9-]+\.[a-z]{2,6}/i;
if (!pt.test($("#email").val())) {
bool = false;
$("#emailspan").html("insert email correctly");
}
if ($("#name").val().length < 3) {
bool = false;
$("#namespan").html("insert name correctly");
}
if ($("#phone").val().length < 12) {
bool = false;
$("#tellspan").html("insert tell correctly");
}
if ($("#message").val().trim().length < 3) {
bool = false;
$("#messageSpan").html("insert message correctly");
}
return bool;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="contactForm" onsubmit="return validateContactForm();">
<div class="form-group">
<label for="name" class="label-login">Name</label>
<input type="text" class="form-control" id="name" autocomplete="off" />
<span id="namespan" class="text-danger"></span>
<i class="fa fa-user"></i>
</div>
<div class="form-group">
<label for="email" class="label-login">email</label>
<input type="email" class="form-control" id="email" autocomplete="off" />
<span id="emailspan" class="text-danger"></span>
<i class="fa fa-envelope"></i>
</div>
<div class="form-group">
<label for="phone" class="label-login">tell number </label>
<input type="text" class="form-control" id="phone" autocomplete="off" />
<span id="tellspan" class="text-danger"></span>
<i class="fa fa-phone"></i>
</div>
<div class="form-group">
<label for="message" class="label-login label-message">message</label>
<textarea class="form-control" rows="3" id="message" autocomplete="off"></textarea>
<span id="messagespan" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" class="btn btn-send center-block" value="send" />
</div>
</form>
You always make validations all together. So whenever a keyup is made on any field, all validations take place.
To avoid this you can proceed in at least 2 ways.
Way 1
You can check the id of the element which fired the event and validate only that field logic. You'll mantain an unique function, adding an if for each field validation
Ex.
$(".contactForm input,.contactForm textarea").each(function () {
$(this).keyup(function () {
var pt = /^[\w.]+#[a-z0-9-]+\.[a-z]{2,6}/i;
var id=$(this).attr("id");
if(id==="email"){
if (!pt.test($("#email").val())) {
$("#emailspan").html("insert email correctly");
}
else {
$("#emailspan").text("");
}
}
...
and so on for each field..
Way 2
Alternatively you can make and handler function for each specific field, removing $(".contactForm input,.contactForm textarea").each(function () {.
Ex.
$("#name").keyup(function () {
if ($(this).val().length < 3) {
$("#namespan").html("insert name correctly");
}
else {
$("#namespan").text("");
}
});
.....
and so on for each field
I created a html form and a function validateForm() to validate the form fields. However the function is only reporting issues with wrong email input, and its not validating the other fields in the form. Can you check my code to see if i have any errors.
Thanks
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Support Center</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/layout.css" type="text/css">
<link rel="stylesheet" href="styles/Form.css" type="text/css">
<script type="text/javascript" src="Form.js"></script>
</head>
<body>
<div class="wrapper row1">
<header id="header" class="clear">
<div id="hgroup">
<h1>Support Center</h1>
<h2>Welcome to our website</h2>
</div>
<nav>
<ul>
<li>Home</li>
<li>Our Staff</li>
<li>Location</li>
<li>Help</li>
<li class="last"></li>
</ul>
</nav>
</header>
</div>
</body>
<!-- content -->
<body>
<h1>Help is here!</h1>
<form>
<h1>Should you need assistance, please do not hesitate to contact us:</h1>
<div class="contentform">
<div id="sendmessage"> Your form has been sent successfully. Thank you. </div>
<div class="leftcontact">
<div class="form-group">
<p>Surname<span>*</span></p>
<span class="icon-case"><i class="fa fa-male"></i></span>
<input type="text" name="lastName" id="lastName"/>
<div class="validation"></div>
</div>
<div class="form-group">
<p>First Name <span>*</span></p>
<span class="icon-case"><i class="fa fa-user"></i></span>
<input type="text" name="firstName" id="firstName"/>
<div class="validation"></div>
</div>
<div class="form-group">
<p>E-mail <span>*</span></p>
<span class="icon-case"><i class="fa fa-envelope-o"></i></span>
<input type="email" name="emailAddress" id="emailAddress"/>
<div class="validation"></div>
</div>
<div class="form-group">
<p>Office <span>*</span></p>
<span class="icon-case"><i class="fa fa-location-arrow"></i></span>
<input type="text" name="office" id="office"/>
<div class="validation"></div>
</div>
<div class="form-group">
<p>Desk <span>*</span></p>
<span class="icon-case"><i class="fa fa-map-marker"></i></span>
<input type="text" name="deskNumber" id="deskNumber"/>
<div class="validation"></div>
</div>
</div>
<div class="rightcontact">
<div class="form-group">
<p>Phone number <span>*</span></p>
<span class="icon-case"><i class="fa fa-phone"></i></span>
<input type="text" name="mobilePhone" id="mobilePhone"/>
<div class="validation"></div>
</div>
<div class="form-group">
<p>Job Number <span>*</span></p>
<span class="icon-case"><i class="fa fa-building-o"></i></span>
<input type="text" name="jobNumber" id="jobNumber"/>
<div class="validation"></div>
</div>
<div class="form-group">
<p>Computer <span>*</span></p>
<span class="icon-case"><i class="fa fa-info"></i></span>
<input type="text" name="computerNumber" id="computerNumber"/>
<div class="validation"></div>
</div>
<div class="form-group">
<p>Problem <span>*</span></p>
<span class="icon-case"><i class="fa fa-comment-o"></i></span>
<select name="Problem">
<option value="New User">New User</option>
<option value="Delete User">Delete User</option>
<option value="Lost File">Lost File</option>
<option value="New Software Installation">New Software Installation</option>
<option value="Virus Checking">Virus Checking</option>
</select>
<div class="validation"></div>
</div>
<div class="form-group">
<p>A little about your problem <span>*</span></p>
<span class="icon-case"><i class="fa fa-comments-o"></i></span>
<textarea name="message" rows="14"></textarea>
<div class="validation"></div>
</div>
</div>
</div>
<button type="submit" class="bouton-contact">Send</button>
</form>
</body>
</html>
</body>
</html>
Code
function validateForm() {
var letters = "[A-Za-z]+$";
var numbers = "^[0-9]+$";
var emailReg = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
var jobNumber = document.getElementById("jobNumber").value;
var firstName = document.getElementById("firstName").value;
var lastName = document.getElementById("lastName").value;
var mobilePhone = document.getElementById("mobilePhone").value;
var emailAddress = document.getElementById("emailAddress").value;
var officeNumber = document.getElementById("office").value;
var deskNumber = document.getElementById("deskNumber").value;
var computerNumber = document.getElementById("computerNumber").value;
if(jobNumber != "" && firstName != "" && lastName != "" && mobilePhone != "" && emailAddress != "" && officeNumber != "" && deskNumber != "" && computerNumber != "") {
if(jobNumber.length == 5 && jobNumber.match(numbers)) {
if(firstName.match(letters) && lastName.match(letters)) {
if(mobilePhone.length == 10 && mobilePhone.match(numbers)) {
if(emailAddress.match(emailReg)) {
alert("Form submitted!");
return true;
}
else {
alert("Please enter a valid email");
return false;
}
}
else {
alert("Please enter a valid mobile number");
return false;
}
}
else {
alert("Please enter a valid first name and last name");
return false;
}
}
else {
alert("Please enter a valid job number");
return false;
}
}
else {
alert("Please enter in all fields");
return false;
}
}
Edit: I just noticed you're using a class contentform and I thought it was an id. I would also add an id to your form to be able to retrieve all form data with one DOM traversal instead of several.
Also, the reason the email is the only one working is because the browser is validating the email without using your JS.
First I would ditch all the variables declared and replace it with the form object.
var formObject = document.getElementById('contentform');
Then you could check whatever child elements that are required. I would also remove the nesting of your if statements, and instead of alerting an error and returning false, add the error to an array to store each one, then return after all items are validated.
var errorList = [];
var isValid = true;
if(formObject.jobNumber == "") {
errorList.push('Please enter a valid job number');
isValid = false;
}
Then rinse and repeat for each element required. After that, just return the list and status (isValid).
// this should be on its own at the bottom of your function right before you return
if (!isValid) {
alert(errorList);
// I would add some formatting or preferably display in the form view.
}
return isValid;
html file
// add the event handler here
<button type="submit" onclick="validateForm()" class="bouton-contact">Send</button>
Also, these
if (!isValid) {
alert(errorList);
}
should be removed from each if statement and placed at the bottom after all have been checked.
Here you validate your email address: First pass the id to javascript by post method then the function validation() will works.
//html
<div>
<input type="text" name="email" id="email" class="" data-wow-delay=".5s" value="" placeholder="Email..." />
</div>
<span id="emailerror" style="display:none; color:#F00">Enter valid email id*</span>
<input type="submit" onClick="return validation();" class="wow fadeInUp" value="Send" />
//javascript
function validation()
{
var email = document.getElementById('email').value;
if(email == '' || !(/^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)))
{
document.getElementById('emailerror').style.display = 'inline';
var error=1;
}
else
{
document.getElementById('emailerror').style.display = 'none';
}
if(error == 1)
{
return false;
}
else
{
return true;
}
}
now your email validation works fine, thanks