We Keep Coding

Validation in JavaScript - how to make the red border disappear?

At the moment, when a field is empty and not valid the field turns red and a describing text shows up. But how do I make the field and text disappear when the user fill in the field correctly?
code in HTML:
<label for="email"><b>Email</b></label>
<label id="lblemail" style="color: red; visibility: hidden; float: right;">Invalid email</label><br>
<input type="text" placeholder="Enter Email" name="email" id="email"><br>
code in JS:
var email = document.getElementById("email");
if (email.value.trim() == "") {
email.style.border = "solid 1px red"
document.getElementById("lblemail").style.visibility="visible";
return false;
} else {
return true; }

You should add event listener on input event:
const email = document.getElementById('email');
const label = document.getElementById('lblemail');
email.addEventListener('input', function(e) {
if (!e.target.value.trim()) {
email.style.border = 'solid 1px red';
label.style.visibility = 'visible';
} else {
email.style.border = 'solid 1px black';
label.style.visibility = 'hidden';
}
})
It's better to use input event because it checks input each time you change it

I think you can unset using js code
var email = document.getElementById("email");
if (email.value.trim() == "") {
email.style.border = "solid 1px red"
document.getElementById("lblemail").style.visibility="visible";
return false;
} else {
email.style.border = "none"
document.getElementById("lblemail").style.visibility="hidden";
return true;
}

i think you can use a eventlistener, this should work
var email = document.getElementById("email");
email.addEventListener('change', () => {
if (email.value.trim() == "") {
email.style.border = "solid 1px red"
document.getElementById("lblemail").style.visibility="visible";
return false;
} else {
email.style.border = none;
document.getElementById("lblemail").style.visibility="visible";
return true; }
})

How to have all errors pointed out instead of one by one

Here's the cobbled script. It works as in the minute you leave something blank, it points it out via the submit button. But it's annoying because it points it out one by one instead of right away all fields that are blank.
How do I fix this? Please break it down in bite-size as the bigger goal here is understanding it not just merely making this work.
document.forms[0].onsubmit= function() {
var form = document.forms[0];
for (var i = 0; i < form.elements.length; i++) {
if (form.elements[i].value.length == 0) {
console.log(form.elements[i]);
form.elements[i].border = "1px solid red";
form.elements[i].style.backgroundColor = "#FFCCCC";
return false;
}
}
}
<form method="post" action="" id="myForm">
<div id="validation"></div>
<p><label>Name<br><input type="text" name="Name"></label></p>
<p><label>Email<br><input type="email" name="Email" ></label></p>
<p><input type="submit" value="Submit"></p>
</form>

Your return statement is causing the loop to halt early. Just let it run to the end if you want to signal all incomplete fields.
document.forms[0].onsubmit= function(event) {
for (var i = 0; i < this.elements.length; i++) {
if (this.elements[i].value.length == 0) {
event.preventDefault();
this.elements[i].style.border = "1px solid red";
this.elements[i].style.backgroundColor = "#FFCCCC";
}
}
}
And here's a more modern way to write it, using a class and newer syntax.
document.querySelector("form").addEventListener("submit", function(event) {
for (const el of this.elements) {
if (el.classList.toggle("incomplete", el.value.length == 0)) {
event.preventDefault();
}
}
});
.incomplete {
border: 1px solid red;
background-color: #FFCCCC;
}
<form method="post" action="" id="myForm">
<div id="validation"></div>
<p><label>Name<br><input type="text" name="Name"></label></p>
<p><label>Email<br><input type="email" name="Email" ></label></p>
<p><input type="submit" value="Submit"></p>
</form>

You exit the loop as soon as an input element of the form has a length of 0 :
if (form.elements[i].value.length == 0) {
.. ..
return false;
}
The return false; must be located after the loop if at least an input didin't match to your requirements.
You may use a boolean variable to store this information.
<script>
document.forms[0].onsubmit= function() {
var form = document.forms[0];
var hasError = false;
for (var i = 0; i < form.elements.length; i++) {
if (form.elements[i].value.length == 0) {
console.log(form.elements[i]);
form.elements[i].border = "1px solid red";
form.elements[i].style.backgroundColor = "#FFCCCC";
hasError = true;
}
}
if (hasError){
return false;
}
}
</script>

javascript Validation: removing the error msg by a textbox

I have a textbox and I used JS to see check if the text box is empty or not.
if it is empty a error message will appear under the text box.
Now when I do go back and enter text into the empty textbox the error message stays. how can I re-check if the user entered any text and then automatically remove the error link.
<label for="last_name_field">Last Name <abbr title="Required">*</abbr></label>
<input type="text" id="last_name_field" name="lastname" placeholder="Last Name" onblur="validateLN()">
function validateLN() {
if (document.form.lastname.value == "") { //create an error message
var msg = " Last Name cannot be blank";
//call the display error function
displayError(document.form.lastname, msg);
}
}
function displayError(element, msg) {
if (element.nextSibling.tagName == "SPAN" && element.nextSibling.textContent.trim == msg.trim) {
return;
} else {
var msgElement = document.createElement("span");
msgElement.textContent = msg;
msgElement.style.color = "red";
element.parentNode.insertBefore(msgElement, element.nextSibling);
element.style.border = "solid 1px red";
}
}

Remove the error from within the onchange event of your textbox.
function validateLN() {
if (document.form.lastname.value == "") { //create an error message
var msg = " Last Name cannot be blank";
//call the display error function
displayError(document.form.lastname, msg);
}
}
document.form.lastname.onchange = function() {
document.getElementById('errorMsg').remove();
}
function displayError(element, msg) {
if (element.nextSibling.tagName == "SPAN" && element.nextSibling.textContent.trim == msg.trim) {
return;
} else {
var msgElement = document.createElement("span");
msgElement.id = 'errorMsg';
msgElement.textContent = msg;
msgElement.style.color = "red";
element.parentNode.insertBefore(msgElement, element.nextSibling);
element.style.border = "solid 1px red";
}
}
Or simply keep it there and toggle its display value:
var msgElement = document.createElement("span");
msgElement.id = 'errorMsg';
msgElement.textContent = msg;
msgElement.style.color = "red";
msgElement.style.display = 'none';
element.parentNode.insertBefore(msgElement, element.nextSibling);
element.style.border = "solid 1px red";
function validateLN() {
if (document.form.lastname.value == "") { //create an error message
var msg = " Last Name cannot be blank";
//call the display error function
document.getElementById('errorMsg').style.display = 'inline';
}
}
document.form.lastname.onchange = function() {
document.getElementById('errorMsg').style.display = 'none';
}

Validating Input with Javascript

I'm working on a web form with several textboxes and a submit button. When the submit button is clicked, I am supposed to verify that the required fields all have input and that the age field is only numeric. For example, the user can enter 56, but 56 years-old, shouldn't be accepted. If the user enters invalid input or leaves required fields blank, the border around the appropriate textboxes should turn red.
However, as my code is written now all the required fields turn red regardless of input. Any ideas how I can fix this and make the page follow the couple of rules I listed?
Most Recent Code
<html>
<head>
<title>Project 4</title>
<style type="text/css">
body {
background-color: black;
color: blue;
text-align: center;
border: 2px double blue;
}
</style>
</head>
<body>
<h1>Welcome to my Web Form!</h1>
<p>
Please fill out the following information.<br>
Please note that fields marked with an asterisk (*) are required.
</p>
<form name="myForm" id="myForm" onsubmit="return validateForm()">
*Last Name: <br>
<input type="text" id="lastname">
<br>
First Name: <br>
<input type="text" id="firstname">
<br>
*Hobbies (separate each hobby with a comma): <br>
<input type="text" id="hobbies">
<br>
Pets:
<div id="petsContainer">
<input type="text" id="pets">
<input type="button" id="addPet" value="Add Pet">
</div>
<br>
Children:
<div id="childContainer">
<input type="text" id="children">
<input type="button" id="addKid" value="Add Child">
</div>
<br>
*Address: <br>
<input type="text" id="address">
<br>
*Phone Number:<br>
<input type="text" id="phone">
<br>
*Age: <br>
<input type="text" id="age">
<br>
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
var validatePhoneOnKeyUpAttached = false;
var validateLNameOnKeyUpAttached = false;
var validateHobbiesOnKeyUpAttached = false;
var validateAddressOnKeyUpAttached = false;
var validateAgeOnKeyUpAttached = false;
function validateForm() {
if(!validatePhoneOnKeyUpAttached) {
document.getElementById("phone").onkeyup = checkPhone;
validatePhoneOnKeyUpAttached = true;
}
else if(!validateLNameOnKeyUpAttached) {
document.getElementById("lastname").onkeyup = checkEmpty;
validateLNameOnKeyUpAttached = true;
}
else if(!validateHobbiesOnKeyUpAttached) {
document.getElementById("hobbies").onkeyup = checkEmpty;
validateHobbiesOnKeyUpAttached = true;
}
else if(!validateAddressOnKeyUpAttached) {
document.getElementById("address").onkeyup = checkEmpty;
validateAddressOnKeyUpAttached = true;
}
else if(!validateAgeOnKeyUpAttached) {
document.getElementById("age").onkeyup = checkEmpty;
document.getElementById("age").onkeyup = checkAge;
validateAgeOnKeyUpAttached = true;
}
return checkEmpty() && checkPhone() && checkAge();
}
function checkPhone() {
var phone = document.forms["myForm"]["phone"].value;
var phoneNum = phone.replace(/[^\d]/g, '');
if(phoneNum.length > 6 && phoneNum.length < 11) {
document.getElementById("phone").style.borderColor="transparent";
return true;
}
else if(phoneNum.length < 7 || phoneNum.length > 10) {
document.getElementById("phone").style.borderColor="red";
return false;
}
}
function checkEmpty() {
var lname = document.forms["myForm"]["lastname"].value;
var pNum = document.forms["myForm"]["phone"].value;
var hobs = document.forms["myForm"]["hobbies"].value;
var live = document.forms["myForm"]["address"].value;
var yr = document.forms["myForm"]["age"].value;
document.getElementById("lastname").style.borderColor = (lname == "") ? "red" : "transparent";
document.getElementById("hobbies").style.borderColor = (hobs == "") ? "red" : "transparent";
document.getElementById("phone").style.borderColor = (pNum == "") ? "red" : "transparent";
document.getElementById("address").style.borderColor = (live == "") ? "red" : "transparent";
document.getElementById("age").style.borderColor = (yr == "") ? "red" : "transparent";
}
function checkAge() {
var age = document.getElementById("age").value;
if(isNan(age)) {
return false;
}
else {
document.getElementById("age").style.borderColor="red";
return true;
}
}
document.getElementById("addPet").onclick=function() {
var div = document.getElementById("petsContainer");
var input = document.createElement("input");
input.type = "text";
input.name = "pats[]";
div.appendChild(document.createElement("br"));
div.appendChild(input);
}
document.getElementById("addKid").onclick=function() {
var div = document.getElementById("childContainer");
var input = document.createElement("input");
input.type = "text";
input.name = "child[]";
div.appendChild(document.createElement("br"));
div.appendChild(input);
}
</script>
</body>
</html>
The problem I'm currently having is that when I click the submit button, all the fields turn red for a split second, but then go back to the regular color and the input is erased. Any thoughts on how to fix this?

By including all of the borderColor="red" statements in a single code block, you're applying that style to all your inputs, even if only one of them failed validation. You need to separate out each statement so that it only applies to the individual field(s) that failed validation:
document.getElementById("lastname").style.borderColor = (lname == "") ? "red" : "transparent";
document.getElementById("phone").style.borderColor = (pNum == "") ? "red" : "transparent";
...
Also, I'm using the ternary operator ? : to clean up the code as well. These statements would replace the if-else block you've written.

I am using the following javascript functions in order to validate my form variables. Hope these will helpful for you.
var W3CDOM = (document.getElementsByTagName && document.createElement);
window.onload = function () {
document.forms[0].onsubmit = function () {
return validate()
}
}
function validate() {
validForm = true;
firstError = null;
errorstring = '';
var x = document.forms[0].elements;
for (var i = 0;i < x.length;i++) {
if (!x[i].value) {
validForm = false;
writeError(x[i], 'This field is required');
}
}
// This can be used to validate input type Email values
/* if (x['email'].value.indexOf('#') == -1) {
validForm = false;
writeError(x['email'],'This is not a valid email address');
}
*/
if (!W3CDOM)
alert(errorstring);
if (firstError)
firstError.focus();
return validForm;
}
function writeError(obj, message) {
validForm = false;
//if (obj.hasError) return false;
if (W3CDOM) {
obj.className += ' error';
obj.onchange = removeError;
var sp = document.createElement('span');
sp.className = 'error';
sp.appendChild(document.createTextNode(message));
obj.parentNode.appendChild(sp);
obj.hasError = sp;
} else {
errorstring += obj.name + ': ' + message + '\n';
obj.hasError = true;
}
if (!firstError)
firstError = obj;
return false;
}
function removeError() {
this.className = this.className.substring(0, this.className.lastIndexOf(' '));
this.parentNode.removeChild(this.hasError);
this.hasError = null;
this.onchange = null;
}
You can call the validations right after the form submission as given below.
<form name="loginForm" action="do.login" method="POST" class="form" onsubmit="return validate();">

Clearing input value onclick

I'm looking for some help on clearing the values of my input and text areas onclick after I insert an error message into the value of my inputs and textarea. Here's my code:
HTML
<form name="form" action="contact-handler.php" method="post" onsubmit="return contact();">
<input type="text" name="name" placeholder="Name:">
<input type="text" name="email" placeholder="E-mail:">
<select name="subject">
<option value="0">Categories</option>
<option value="1">Web Design</option>
<option value="2">Web Development</option>
<option value="3">Graphic Design</option>
<option value="4">Photography / Video</option>
<option value="5">Marketing</option>
</select>
<textarea name="message" placeholder="Message:"></textarea>
<input class="button" type="submit" value="Send">
</form>
JavaSript
function contact() {
var name = form.name.value;
var email = form.email.value;
var atPosition = email.indexOf("#");
var dotPosition = email.lastIndexOf(".");
var subject = form.subject.value;
var message = form.message.value;
var flag = 0;
// Name
if(name != "" && name.length > 2 && !/[\d]/.test(name)) {
flag++;
form.name.style.border="1px solid #CCC";
}
else{
form.name.style.border="1px solid #D73300";
form.name.value="Please enter a valid name";
}
// Email
if(email != "" && atPosition > 1 && dotPosition > atPosition + 2 && dotPosition + 2 <= email.length) {
flag++;
form.email.style.border="1px solid #CCC";
}
else{
form.email.style.border="1px solid #D73300";
form.email.value="Please enter a valid email";
}
// Subject
if(subject > 0) {
flag++;
form.subject.style.border="1px solid #CCC";
}
else{
form.subject.style.border="1px solid #D73300";
}
// Message
if(message != "" && message.length > 30) {
flag++;
form.message.style.border="1px solid #CCC";
}
else{
form.message.style.border="1px solid #D73300";
form.message.value="Please enter a valid message";
}
// Flag
if(flag == 4) {
return true;
}
else
{
return false;
}
}

Change the value of the placeholder attribute, not the input value. And use classes for styling:
form.element.className = 'error';
form.element.setAttribute('placeholder', "Can I haz a value?");
(fiddle)
A nicer way would be to add the required="required" attribute to your form elements, then you can just style them using the :invalid pseudo-class:
input:invalid, textarea:invalid{
border: ....
}

Vanilla JS way:
window.onload = function() {
var form = document.forms["form"];
var formElems = form.getElementsByTagName('input');
formElems.concat(form.getElementsByTagName('textarea'));
for(i=0; i<formElems.length; i++) {
formElems[i].onclick = function() {
if(this.style.borderColor == '#CCC') {
this.value = '';
}
}
}
};
put this above your contact function.