We Keep Coding

JavaScript: How to display separate error messages when form field is invalid or empty

Im tryin to display one error message when a user submits a form with an invalid email address but display a different error message if the user submits an EMPTY email field.
Somehow I need to change the email error message when the form is submitted.
const invalidEmail = document.createElement('span');
invalidEmail.className = "error";
invalidEmail.id = "invalidEmail";
invalidEmail.textContent = "Please enter a valid Email";
//////////////////////////////////////////////////////
const emptyEmail = document.createElement('span');
emptyEmail.className = "error";
emptyEmail.id = "emptyEmail";
emptyEmail.textContent = "Email is required";
//////////////////////////////////////////////////////
function validateEmail() {
// get value from email input
const email = $("#mail").val();
const regexEmail = /^\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if (regexEmail.test(email)) {
return true;
} else if (email === "") {
alert('enter email');
return false;
}
}
$("#mail").keyup(function() {
if (emptyEmail()) {
// if the user email is valid set the input text and border to red
email.style.border = "2px solid green";
emptyEmail.style.display = "none";
return true;
} else {
// if the user email is not valid set the input text and border to red
email.before(emptyEmail);
emptyEmail.style.fontSize = "1em"
emptyEmail.style.color = "red";
email.style.border = "2px solid red";
emptyEmail.style.display = "block";
return false;
}
});
$("#mail").keyup(function() {
if (validateEmail()) {
// if the user email is valid set the input text and border to red
email.style.border = "2px solid green";
invalidEmail.style.display = "none";
return true;
} else {
// if the user email is not valid set the input text and border to red
email.before(invalidEmail);
invalidEmail.style.fontSize = "1em"
invalidEmail.style.color = "red";
email.style.border = "2px solid red";
invalidEmail.style.display = "block";
return false;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="mail">Email:</label>
<input type="email" id="mail" name="user-email" placeholder="Enter Valid Email">

The following code will do just what you need. I've added the email field within a form and added the submit button just to simulate the situation:
const invalidEmail = document.createElement('span');
invalidEmail.className="error";
invalidEmail.id="invalidEmail";
invalidEmail.textContent="Please enter a valid Email";
//////////////////////////////////////////////////////
const emptyEmail = document.createElement('span');
emptyEmail.className="error";
emptyEmail.id="emptyEmail";
emptyEmail.textContent="Email is required";
//////////////////////////////////////////////////////
function validateEmail(){
// get value from email input
const email = $("#mail").val();
const regexEmail = /^\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if(regexEmail.test(email)){
return true;
} else if (email === "") {
alert('enter email');
return false;
}
}
function isEmptyEmail(obj){
if(obj.val() == '') return true;
else return false;
}
$("form").submit(function(e){
let email = $("#mail");
if(isEmptyEmail(email)){
e.preventDefault();
// if the user email is valid set the input text and border to red
invalidEmail.style.border = "2px solid green";
invalidEmail.style.display = "none";
email.before(emptyEmail);
emptyEmail.style.fontSize = "1em"
emptyEmail.style.color = "red";
emptyEmail.style.border = "2px solid red";
emptyEmail.style.display = "block";
return true;
}else if(!validateEmail()){
e.preventDefault();
// if the user email is valid set the input text and border to red
emptyEmail.style.border = "2px solid green";
emptyEmail.style.display = "none";
email.before(invalidEmail);
invalidEmail.style.fontSize = "1em"
invalidEmail.style.color = "red";
invalidEmail.style.border = "2px solid red";
invalidEmail.style.display = "block";
return true;
} else{
// if the user email is not valid set the input text and border to red
invalidEmail.style.border = "2px solid green";
invalidEmail.style.display = "none";
emptyEmail.style.border = "2px solid green";
emptyEmail.style.display = "none";
return false;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<label for="mail">Email:</label>
<input type="text" id="mail" name="user-email" placeholder="Enter Valid Email">
<input type="submit">
</form>

validation contact form with javascript

I have a problem with my code and i really don't know how to correct it. The validation works well but the problem is that when you fill in a name input field for example - dima, then you choose phone's field but the name's field is still doesn't have anything that you can see that you fill in it correctly, you have to select again this field and only than it adds some classes to the field. how can i fix this?
<form name="myform>
<input type="text" name="firstname" placeholder="First Name" maxlength="30">
<p id="nameError">First name is required</p>
<p id="nameErrorTwo">Enter only characters</p>
<input type="tel" name="phone" placeholder="Phone Number">
<p id="telError">Phone is required</p>
<p id="telErrorTwo">Enter a number</p>
</form>
// firstname
document.myform.firstname.onblur= function() {
var name = document.myform.firstname.value;
if (name === "") {
document.myform.firstname.removeAttribute("class", "ready");
document.myform.firstname.style.border = "1px solid #da3637";
document.getElementById("nameError").style.display = "block";
document.getElementById("nameErrorTwo").style.display = "none";
} else {
//firstname onchange
document.myform.firstname.onchange= function() {
document.myform.firstname.style.border = "1px solid #509d12";
document.getElementById("nameError").style.display = "none";
document.myform.firstname.setAttribute("class", "ready");
var pattern = new RegExp("\[a-z]+", "i");
var isValid = this.value.search(pattern) >= 0;
if (!(isValid)) {
document.myform.firstname.style.border = "1px solid #da3637";
document.getElementById("nameErrorTwo").style.display = "block";
} else {
document.getElementById("nameErrorTwo").style.display = "none";
document.myform.firstname.style.border = "1px solid #509d12";
}
};
}
};
//phone
document.myform.phone.onblur= function() {
var name = document.myform.phone.value;
if (name === "") {
document.myform.phone.removeAttribute("class", "ready");
document.myform.phone.style.border = "1px solid #da3637";
document.getElementById("telError").style.display = "block";
document.getElementById("telErrorTwo").style.display = "none";
} else {
//phone onchange
document.myform.phone.onchange= function() {
document.myform.phone.style.border = "1px solid #509d12";
document.getElementById("telError").style.display = "none";
document.myform.phone.setAttribute("class", "ready");
var pattern = new RegExp("\\d", "i");
var isValid = this.value.search(pattern) >= 0;
if (!(isValid)) {
document.myform.phone.style.border = "1px solid #da3637";
document.getElementById("telErrorTwo").style.display = "block";
} else {
document.getElementById("telErrorTwo").style.display = "none";
document.myform.phone.style.border = "1px solid #509d12";
}
};
}
};

In your original code, the onchange() event listeners are set up only when the fields lose focus with a non-empty value. This explains the weird behaviors that you're encountering.
Actually, I don't see any reason to use a mix of onblur() and onchange().
Please see if the following version is doing what you're expecting. It's using onchange() exclusively.
// firstname
document.myform.firstname.onchange= function() {
var name = document.myform.firstname.value;
if (name === "") {
document.myform.firstname.removeAttribute("class", "ready");
document.myform.firstname.style.border = "1px solid #da3637";
document.getElementById("nameError").style.display = "block";
document.getElementById("nameErrorTwo").style.display = "none";
} else {
document.getElementById("nameError").style.display = "none";
document.myform.firstname.setAttribute("class", "ready");
var pattern = new RegExp("^[a-z]+$", "i");
var isValid = this.value.search(pattern) >= 0;
if (!(isValid)) {
document.myform.firstname.style.border = "1px solid #da3637";
document.getElementById("nameErrorTwo").style.display = "block";
} else {
document.getElementById("nameErrorTwo").style.display = "none";
document.myform.firstname.style.border = "1px solid #509d12";
}
}
};
//phone
document.myform.phone.onchange= function() {
var name = document.myform.phone.value;
if (name === "") {
document.myform.phone.removeAttribute("class", "ready");
document.myform.phone.style.border = "1px solid #da3637";
document.getElementById("telError").style.display = "block";
document.getElementById("telErrorTwo").style.display = "none";
} else {
//phone onchange
document.getElementById("telError").style.display = "none";
document.myform.phone.setAttribute("class", "ready");
var pattern = new RegExp("^\\d+$");
var isValid = this.value.search(pattern) >= 0;
if (!(isValid)) {
document.myform.phone.style.border = "1px solid #da3637";
document.getElementById("telErrorTwo").style.display = "block";
} else {
document.getElementById("telErrorTwo").style.display = "none";
document.myform.phone.style.border = "1px solid #509d12";
}
}
};
<form name="myform">
<div>
<input type="text" name="firstname" placeholder="First Name" maxlength="30">
<p id="nameError">First name is required</p>
<p id="nameErrorTwo">Enter only characters</p>
</div>
<div>
<input type="tel" name="phone" placeholder="Phone Number">
<p id="telError">Phone is required</p>
<p id="telErrorTwo">Enter a number</p>
</div>
</form>

Instead to use onchange you may use oninput to control char after char, or onblur to make the test when you will lose the focus.
function setFieldValidity(element, pattern) {
var isValid = element.value === '' || element.value.search(pattern) >= 0;
if (!isValid) {
element.removeAttribute("class", "ready");
element.style.border = "1px solid #da3637";
document.getElementById("nameError").style.display = "block";
document.getElementById("nameErrorTwo").style.display = "none";
} else {
element.setAttribute("class", "ready");
element.style.border = "1px solid #509d12";
document.getElementById("nameError").style.display = "none";
document.getElementById("nameErrorTwo").style.display = "block";
}
}
window.addEventListener('DOMContentLoaded', function(e) {
//firstname
document.myform.firstname.oninput = function(e) {
setFieldValidity(this, new RegExp("\[a-z]+$", "i"));
};
//phone
document.myform.phone.oninput = function(e) {
setFieldValidity(this, new RegExp("^\\d+$", "i"));
};
}, false);
<form name="myform">
<input type="text" name="firstname" placeholder="First Name" maxlength="30">
<p id="nameError">First name is required</p>
<p id="nameErrorTwo">Enter only characters</p>
<input type="tel" name="phone" placeholder="Phone Number">
<p id="telError">Phone is required</p>
<p id="telErrorTwo">Enter a number</p>
</form>

JavaScript form validation for first name, last name and email address is displaying nothing

I am just copying my code:
HTML
<form id='test'>
Name *
<input id="lname" type="text"><span id="wronglname" class="error">*This is a required field</span>
Name *
<input id="name" type="text"><span id="wrongname" class="error">*This is a required field</span>
Email*
<input id="email" type="text"><span id="wrongemail" class="error">* Wrong Email Address</span>
<div>
<input type="submit" value="Submit">
</div>
</form>
Javascript
function ValidateForm() {
var hasError = false;
if (document.getElementById('lname').value == "") {
document.getElementById('lwrongname').style.display = "inline";
hasError = true;
} else {
document.getElementById('wrongname').style.display = "none";
}
if (document.getElementById('name').value == "") {
document.getElementById('wrongname').style.display = "inline";
hasError = true;
} else {
document.getElementById('wrongname').style.display = "none";
}
if (document.getElementById('email').value.search(/^[a-zA-Z]+([_\.-]?[a-zA-Z0-9]+)*#[a-zA-Z0-9]+([\.-]?[a-zA-Z0-9]+)*(\.[a-zA-Z]{2,4})+$/) == -1) {
document.getElementById('wrongemail').style.display = "inline";
hasError = true;
} else {
document.getElementById('wrongemail').style.display = "none";
}
return !hasError;
}
document.getElementById('test').onsubmit = ValidateForm;
CSS
.error {
display:none;
color:red;
}
I am getting no response at all, and whenever I check javascript console by chrome, it shows me also no error, I am not too sure what's wrong with my coding, can anyone help me out?

Here is your mistake:
if (document.getElementById('lname').value == "") {
document.getElementById('lwrongname').style.display = "inline";
hasError = true;
}
Notice document.getElementById('lwrongname'), should be document.getElementById('wronglname').

JavaScript - How to hide errors on Form Validation

How do I hide the error(s) messages and the red border when a user corrects their errors on my form? At the moment it will keep showing the error(s) until the page is refreshed or submitted.
function checkForm() {
var valid = true;
if (!retext.test(document.myform.textfield.value)) {
document.myform.textfield.style.border = "3.5px solid red";
document.getElementById("text").innerHTML = "Invalid text.";
document.getElementById("text").style.display = "block";
valid = false;
}
if (!re.test(document.myform.email.value)) {
document.myform.email.style.border = "3.5px solid red";
document.getElementById("emailwarn").innerHTML = "Invalid email.";
document.getElementById("emailwarn").style.display = "block";
valid = false;
}
if (!retel.test(document.myform.tel.value)) {
document.myform.tel.style.border = "3.5px solid red";
document.getElementById("telwarn").innerHTML = "Invalid telephone number.";
document.getElementById("telwarn").style.display = "block";
valid = false;
}
return valid;
}
I really have no idea on how to do this.

Assuming the checkForm function is called each time the form is amended you can include else clauses to reset the style and visible state of the warnings
function checkForm() {
var valid = true;
if (!retext.test(document.myform.textfield.value)) {
document.myform.textfield.border = "3.5px solid red";
document.getElementById("text").innerHTML = "Invalid text.";
document.getElementById("text").style.display = "block";
valid = false;
} else {
document.myform.textfield.border = 0;
document.getElementById("text").style.display = "none";
}
if (!re.test(document.myform.email.value)) {
document.myform.email.style.border = "3.5px solid red";
document.getElementById("emailwarn").innerHTML = "Invalid email.";
document.getElementById("emailwarn").style.display = "block";
valid = false;
} else {
document.myform.email.border = 0;
document.getElementById("emailwarn").style.display = "none";
}
if (!retel.test(document.myform.tel.value)) {
document.myform.tel.style.border = "3.5px solid red";
document.getElementById("telwarn").innerHTML = "Invalid telephone number.";
document.getElementById("telwarn").style.display = "block";
valid = false;
} else {
document.myform.tel.border = 0;
document.getElementById("telwarn").style.display = "none";
}
return valid;
}

Just add code which clears up the error messages at the beginning of your checkForm() function.
In your current code if error messages had been set once they have no chance to be changed on the correct input.
For example,
function clearErrors() {
document.getElementById("text").style.display = "none";
document.getElementById("emailwarn").style.display = "none";
document.getElementById("telwarn").style.display = "none";
}
function checkForm() {
var valid = true;
clearErrors();
...

Well first it would be better to seperate javascript and CSS styles, by applying classes:
input.error {
border: 3.5px solid red;
}
To apply the style:
document.myform.textfield.classList.add("error");
To remove the style:
document.myform.textfield.classList.remove("error");
To hide the warn element use:
document.getElementById("telwarn").style.display = "none";
Beware that classList does not work with ie < 10

Javascript stopping form from passing data

resolved my javascript issue. Sorry it was mainly my fault as i copied and pasted my code instead of rewriting it out again. Strange thing is that it doesn't seem to pass the variables from the form to the process page as i have echo'd the SQL statement back out. This form did work previously to the java script all i added in was Post Code: for each row and even after deleting the javascript it still doesn't work :S
Sorry deadline tomorrow and im panicing.
<script type="text/javascript">
function checkForm()
{
var username = document.getElementById('username').value;
if(username.length < 5)
{
alert("Username is to short");
return false;
}
else if (username.length<16)
{
alert("Username is to long");
return false;
}
var firstName = document.getElementById('firstName').value;
if(firstName.length <3)
{
alert("Forname is to short");
return false;
}
var lastName = document.getElementById('lastName').value;
if (lastName.length <3)
{
alert("Surname is to short");
return false;
}
var address = document.getElementById('address').value;
if (address.length <8)
{
alert("Address is to short");
return false;
}
var town = document.getElementById('town').value;
if (town.length <3)
{
alert ("Town is to short");
return false;
}
var postCode = document.getElementById('postCode').value;
if (postCode.length <6)
{
alert ("Invalid Post Code");
return false;
}
else if (postCode.length>8)
{
alert("Invalid Post Code");
return false;
}
var cardType = document.getElementById('cardType').value;
if (cardType.length <3)
{
alert ("Please enter a valid card type");
return false;
}
var password = document.getElementById('password').value;
if (password.length <6)
{
alert ("You password must be between 6-12 characters");
return false;
}
else if(password.length>12)
{
alert ("Your password must be between 6-12 characters");
return false;
}
else
{
return true;
}
}
function checkUsername()
{
var username = document.getElementById('username').value;
var element = document.getElementById('username1');
if(username.length < 5)
{
element.innerHTML = "Username is to short";
element.style.color = "red";
}
else if (username.length >16)
{
element.innerHTML = "Username is to long";
element.style.color = "red";
}
else
{
element.innerHTML = "Username";
element.style.color = "green";
}
}
function checkFname()
{
var firstName = document.getElementById('firstName').value;
var element = document.getElementById('firstname1');
if(firstName.length < 3)
{
element.innerHTML = "Forname is to short";
element.style.color = "red";
}
else
{
element.innerHTML = "Forname";
element.style.color = "green";
}
}
function checkLname()
{
var lastName = document.getElementById('lastName').value;
var element = document.getElementById('surname1');
if(lastName.length < 3)
{
element.innerHTML = "Surname is to short";
element.style.color = "red";
}
else
{
element.innerHTML = "Surname";
element.style.color = "green";
}
}
function checkAddress()
{
var address = document.getElementById('address').value;
var element = document.getElementById('address1');
if(address.length < 8)
{
element.innerHTML = "Address is to short";
element.style.color = "red";
}
else
{
element.innerHTML = "Address";
element.style.color = "green";
}
}
function checkTown()
{
var town = document.getElementById('town').value;
var element = document.getElementById('town1');
if(town.length < 3)
{
element.innerHTML = "Town is to short";
element.style.color = "red";
}
else
{
element.innerHTML = "Town";
element.style.color = "green";
}
}
function checkPostCode()
{
var postCode = document.getElementById('postCode').value;
var element = document.getElementById('postcode1');
if(postCode.length < 6)
{
element.innerHTML = "Post code is to short";
element.style.color = "red";
}
else if (postCode.length>8)
{
element.innerHTML = "Post Code To Long";
element.style.color = "red";
}
else
{
element.innerHTML = "Post Code";
element.style.color = "green";
}
}
function checkCard()
{
var cardType = document.getElementById('cardType').value;
var element = document.getElementById('card1');
if(cardType.length < 3)
{
element.innerHTML = "Card is to short";
element.style.color = "red";
}
else
{
element.innerHTML = "Card Type";
element.style.color = "green";
}
}
function checkPassword()
{
var password = document.getElementById('password').value;
var element = document.getElementById('password1');
if(password.length < 6)
{
element.innerHTML = "Password is to short";
element.style.color = "red";
}
else if (password.length>16)
{
element.innerHTML = "Password is to long";
element.style.color = "red";
}
else
{
element.innerHTML = "Password";
element.style.color = "green";
}
}
</script>
<p><b><h3>Welcome User Please Register</h3></b></p>
<form action="registerUserProcess.php" id="registerUserForm" method="post" name="registerUserForm" >
<table>
<tr><td><label id="username1">Username:</label></td><td><input id="username" type="text" size="16" onBlur='checkUsername();'/></td></tr>
<tr><td><label id="firstname1">Forename:</label></td><td><input id="firstName" type="text" size="20" onBlur="checkFname();" /></td></tr>
<tr><td><label id="surname1">Surname:</label></td><td><input id="lastName" type="text" size="30" onBlur="checkLname();" /></td></tr>
<tr><td><label id="address1">Address:</label></td><td><input id="address" type="text" size="50" onBlur="checkAddress();" /></td></tr>
<tr><td></td><td><input id="address2" type="text" size="50" onBlur="" /></td></tr>
<tr><td><label id="town1">Town:</label></td><td><input id="town" type="text" size="50" onBlur="checkTown();" /></td></tr>
<tr><td><label id="postcode1">Post Code:</label></td><td> <input type="text" id="postCode" size="8" onBlur="checkPostCode();" /></td></tr>
<tr><td><label id="contact1">Contact No:</label></td><td> <input type="number" id="contact" size="12" onBlur="checkContactNo();" /></td></tr>
<tr><td>Card Number:</td><td><input type="number" id="cardNo1" size="4" /> - <input type="number" id="cardNo2" size="4" /> - <input type="number" id="cardNo3" size="4" /> - <input type="number" id="cardNo4" size="4" /></td></tr>
<tr><td><label id="card1">Card Type</label></td><td> <input type="text" id="cardType" size="8" onBlur="checkCard();" /></td></tr>
<tr><td>Email Address:</td><td><input id="emailAddress" type="text" size="50" /></td></tr>
<tr><td><label id="password1">Password:</label></td><td><input id="password" type="password" size="16" onBlur="checkPassword();" /></td></tr>
<tr><td><label id="terms1">Accept Terms & Conditions:</label></td><td><input type="checkbox" id="termsConditions" value="yes" onBlur="checkTerms();" /></td></tr>
<tr><td><input type="reset" id="resetForm" value="Reset" id="resetForm" /></td><td><input type="submit" id="submitUser" value="Submit" id="submitUser" onSubmit='return checkForm();' /></td></tr>
</table>
</form>

As others said, check your syntax. In checkform(), it should be
else if (username.length > 16)) instead of < 16
and in checkUsername() you spelled length wrong.
But your main problem is in your returns. In checkform() you should only put return true at the end when everything has been validated, or else the function just exit after the first validation.
You could also refactor all of this. You've got plenty of function that do almost the same thing. If you make one function that take minimum characters, maximum characters and the control to validate in parameters, you could do all of your code in 20 to 30 lines.
Plus, it seems like you copy-pasted some of your functions without changing the name of the variables or the targeted control. In fact, you assign Username as a variable in every function, but change the name in the condition, meaning you use an unassign variable.

Function: checkForm():
You need to change the second else if to:
else if (username.length<16)) needs to be > 16.
--
Function: checkUsername():
You have incorrectly spelled length. Change it to:
else if (username.length>16)

This is too much code for one question, but I noticed a few things in the first function:
else if (username.length<16) // This should probably be username.length > 16
{
alert("Username is to long");
return false;
}
if (isNAN(contact)) // this should probably be !isNaN(contact)
{
return true;
}

You misspelled length in the following: username.lenght>16
This is the reason your too long isn't working.
function checkUsername()
{
var username = document.getElementById('username').value;
var element = document.getElementById('username1');
if(username.length < 5)
{
element.innerHTML = "Username is to short";
element.style.color = "red";
}
else if (username.lenght>16)
{
element.innerHTML = "Username is to long";
element.style.color = "red";
}
else
{
element.style.color = "green";
}
}