We Keep Coding

Form validation of all entries input Javascript

I don't quite understand why when I go to the second entry and then to the others(input), my conditions are not taken into account. Did I make a wrong statement in terms of conditions?
In my code, I assigned rules with regex before sending it to the server. Only condition 1 works.
Thank you for your help.
let inputFirstname = document.querySelector('#firstName');
let inputLastname = document.querySelector('#lastName');
let inputEmail = document.querySelector('#email');
let inputAddress = document.querySelector('#address');
let inputCity = document.querySelector('#city');
const regexName = /^[a-zA-Z-\s]+$/;
const regexMail = new RegExp('^[a-zA-Z0-9.-_]+[#]{1}[a-zA-Z0-9.-_]+[.]{1}[a-z]{2,10}$');
const regexNumber = /^[0-9]{5}$/;
const regexAdress = /^(([a-zA-ZÀ-ÿ0-9]+[\s\-]{1}[a-zA-ZÀ-ÿ0-9]+)){1,20}$/;
document.querySelector('#formContact').addEventListener('change', function (e) {
e.preventDefault();
//Test FIRSTNAME //
if (regexName.test(inputFirstname.value)){
inputFirstname.style.border = " #7EEA5E solid 2px";
return true;
}
//Test LASTNAME //
if (regexName.test(inputLastname.value)) {
inputLastname.style.border = " #7EEA5E solid 2px";
return true;
}
//Test EMAIL //
if (regexMail.test(inputEmail.value)) {
inputEmail.style.border = " #7EEA5E solid 2px";
return true;
}
// Test ADRESS //
if (regexAdress.test(inputAddress.value)) {
inputAddress.style.border = " #7EEA5E solid 2px";
return true;
}
// Test CITY //
if (regexName.test(inputCity.value)) {
inputCity.style.border = " #EA6B5E solid 2px";
return true;
}
else {
alert('Good !');
}
});
<form action="/" method="post" class="row gy-4" id="formContact">
<div class=" form-group">
<label for="firstName">Firstname *</label>
<input type="text" class="form-control" placeholder="" name="firstName" id="firstName"
value="">
<span class="error"></span>
</div>
<div class="form-group">
<label for="lastName" class="form-label">Lastname *</label>
<input type="text" class="form-control" name="lastName" id="lastName" placeholder=""
value="">
<span class="error"></span>
</div>
<div class="form-group">
<label for="email" class="form-label">Email *</label>
<input type="email" class="form-control" name="email" id="email"
placeholder="mail#example.com" value="">
<span class="error"></span>
</div>
<div class="form-group">
<label for="address" class="form-label">Adress *</label>
<input type="text" class="form-control" name="address" id="address"
placeholder="Rue, avenue" value="">
<span class="error"></span>
</div>
<div class="form-group">
<label for="city" class="form-label">City *</label>
<input type="text" class="form-control" id="city" name="city" placeholder="" value="">
<span class="error"></span>
</div>
<div class=" form-group my-4 text-center ">
<button class="btn btnSubmit fw-bold btn-secondary" type="submit"
value="">Order</button>
</div>
</form>

The return calls in your checks exit the whole function on first met condition.
I played a bit around and reworked your code.
Your initial problem was, that you had one function, testing everything even if only one thing changed. On top of that, you wanted to return within each check. The return will exit the function entirely when called. Therefore nothing but your first check came through.
You could avoid this by using a switch case and checking depending on your event.target.id which check you want to run.
I introduced a "global" error variable which defaults to true.
After each check this variable is being updated accordingly.
I added a eventListener with Click on your Order Button, which will only send if error = false, otherwise show an alert. Even though I wouldn't use an altert in production code, since it will HALT your entire code, which might cause problems if you're about to work with async calls.
A message for the user to inform him that everything is ready to be sent seems a bit over the top, since you want to color every field as its updated.
let error = true;
const regexName = /^[a-zA-Z-\s]+$/;
const regexMail = new RegExp('^[a-zA-Z0-9.-_]+[#]{1}[a-zA-Z0-9.-_]+[.]{1}[a-z]{2,10}$');
const regexNumber = /^[0-9]{5}$/;
const regexAdress = /^(([a-zA-ZÀ-ÿ0-9]+[\s\-]{1}[a-zA-ZÀ-ÿ0-9]+)){1,20}$/;
document.querySelector('#formContact').addEventListener('change', function (e) {
e.preventDefault();
const borderCode = " #7EEA5E solid 2px";
switch (e.target.id) {
case 'firstName':
if(regexName.test(e.target.value)) {
error = false;
} else {
error = true;
}
break;
case 'lastName':
if(regexName.test(e.target.value)) {
error = false;
} else {
error = true;
}
break;
case 'email':
if(regexMail.test(e.target.value)) {
error = false;
} else {
error = true;
}
break;
case 'address':
if(regexMail.test(e.target.value)) {
error = false;
} else {
error = true;
}
break;
case 'city':
if(regexName.test(e.target.value)) {
error = false;
} else {
error = true;
}
break;
}
if (!error) {
e.target.style.border = borderCode;
}
});
document.querySelector('#submitButton').addEventListener('click', function (e) {
if(error) {
e.preventDefault();
alert('Some Inputs are not valid.');
}
});
<form action="/" method="post" class="row gy-4" id="formContact">
<div class=" form-group">
<label for="firstName">Firstname *</label>
<input type="text" class="form-control" placeholder="" name="firstName" id="firstName"
value="">
<span class="error"></span>
</div>
<div class="form-group">
<label for="lastName" class="form-label">Lastname *</label>
<input type="text" class="form-control" name="lastName" id="lastName" placeholder=""
value="">
<span class="error"></span>
</div>
<div class="form-group">
<label for="email" class="form-label">Email *</label>
<input type="email" class="form-control" name="email" id="email"
placeholder="mail#example.com" value="">
<span class="error"></span>
</div>
<div class="form-group">
<label for="address" class="form-label">Adress *</label>
<input type="text" class="form-control" name="address" id="address"
placeholder="Rue, avenue" value="">
<span class="error"></span>
</div>
<div class="form-group">
<label for="city" class="form-label">City *</label>
<input type="text" class="form-control" id="city" name="city" placeholder="" value="">
<span class="error"></span>
</div>
<div class=" form-group my-4 text-center ">
<button class="btn btnSubmit fw-bold btn-secondary" type="submit"
id="submitButton" value="">Order</button>
</div>
</form>

JavaScript calculation won't print results

I have this code
$(function() {
if(document.getElementById('price') !== null && document.getElementById('dp') !== null){
var price = document.getElementById('price').value;
var deposite = document.getElementById('dp').value;
document.getElementById('remained').value = parseInt(price)-parseInt(deposite);
}
});
and this fields in my form
<div class="col-md-3">
<label for="price">Price *</label>
<input type="number" class="form-control" id="price" name="price">
</div>
<div class="col-md-3">
<label for="dp">DP *</label>
<input type="number" class="form-control" id="dp" name="dp">
</div>
<div class="col-md-3">
<label for="remained">Remained *</label>
<input type="number" class="form-control" id="remained" name="remained">
</div>
The logic is simple:
get price
get DP
print minus results in remained input
but somehow it doesn't print anything in remained input.
Any idea what I did wrong?

Your code is executing on page load and the value of the inputs are empty.
You should execute your code on some event like the following way:
$(function() {
$('#dp, #price').on('input', function(){
if(document.getElementById('price') !== null && document.getElementById('dp') !== null){
var price = document.getElementById('price').value;
var deposite = document.getElementById('dp').value;
document.getElementById('remained').value = parseInt(price)-parseInt(deposite);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-3">
<label for="price">Price *</label>
<input type="number" class="form-control" id="price" name="price">
</div>
<div class="col-md-3">
<label for="dp">DP *</label>
<input type="number" class="form-control" id="dp" name="dp">
</div>
<div class="col-md-3">
<label for="remained">Remained *</label>
<input type="number" class="form-control" id="remained" name="remained">
</div>

I think you should put the calculation to ready function
because it is asynchronous
$( document ).ready(function() {
console.log( "ready!" );
// calculation
});
Or better use angular ... Instead of jQuery

the calculation is right but it doen one time on page ready event
add manual button to tell javascrip when to calculate the value
alos add event listener to automatically call on change
<div class="col-md-3">
<label for="price">Price *</label>
<input type="number" class="form-control" id="price" name="price">
</div>
<div class="col-md-3">
<label for="dp">DP *</label>
<input type="number" class="form-control" id="dp" name="dp">
</div>
<div class="col-md-3">
<label for="remained">Remained *</label>
<input type="number" class="form-control" id="remained" name="remained">
</div>
<button type="button"
onclick="cal()">
cal
</button>
$(function() {
document.getElementById("price").addEventListener("change",cal);
document.getElementById("dp").addEventListener("change",cal);
});
function cal(){
if(document.getElementById('price') !== null && document.getElementById('dp') !== null){
var price = document.getElementById('price').value;
var deposite = document.getElementById('dp').value;
document.getElementById('remained').value = parseInt(price)-parseInt(deposite);
}
}

The js code runs on the initial loading of webpage. The js code must be called by an onclick or an onkeyup

Form validation with multiple highlighted fields

I have a registration form that I would like to have multiple field validation. What I mean by this is if more than one field is not filled in it will be highlighted red. I have some code already written but instead of highlighting the field not filled in, it's highlighting all of them. I realise it is quite long winded but I'm fairly new to this. My JS code is as follows:
`function formCheck() {
var val = document.getElementById("fillMeIn").value;
var val = document.getElementById("fillMeIn2").value;
var val = document.getElementById("fillMeIn3").value;
var val = document.getElementById("fillMeIn4").value;
var val = document.getElementById("fillMeIn5").value;
var val = document.getElementById("fillMeIn6").value;
var val = document.getElementById("fillMeIn7").value;
if (val == "") {
alert("Please fill in the missing fields");
document.getElementById("fillMeIn").style.borderColor = "red";
document.getElementById("fillMeIn2").style.borderColor = "red";
document.getElementById("fillMeIn3").style.borderColor = "red";
document.getElementById("fillMeIn4").style.borderColor = "red";
document.getElementById("fillMeIn5").style.borderColor = "red";
document.getElementById("fillMeIn6").style.borderColor = "red";
document.getElementById("fillMeIn7").style.borderColor = "red";
return false;
}
else {
document.getElementById("fillMeIn").style.borderColor = "green";
document.getElementById("fillMeIn2").style.borderColor = "green";
document.getElementById("fillMeIn3").style.borderColor = "green";
document.getElementById("fillMeIn4").style.borderColor = "green";
document.getElementById("fillMeIn5").style.borderColor = "green";
document.getElementById("fillMeIn6").style.borderColor = "green";
document.getElementById("fillMeIn7").style.borderColor = "green";
}
}`
My HTML is as follows:
'<form id="mbrForm" onsubmit="return formCheck();" action="thanks.html" method="post">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4 vertical-gap">
FIRST NAME:
<input id="fillMeIn" type="text" class="form-control" placeholder="First Name" >
</div>
<div class="col-md-4 vertical-gap">
LAST NAME:
<input id="fillMeIn2" type="text" class="form-control" placeholder="Last Name" >
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 vertical-gap">
ADDRESS:
<input id="fillMeIn3" type="text" class="form-control vertical-gap" placeholder="First Line" >
<input id="fillMeIn4" type="text" class="form-control vertical-gap" placeholder="Second Line" >
<input id="fillMeIn5" type="text" class="form-control vertical-gap" placeholder="Town/City" >
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4 vertical-gap">
POST CODE:
<input id="fillMeIn6" type="text" class="form-control vertical-gap" placeholder="Postcode" >
</div>
<div class="col-md-4 vertical-gap">
PHONE No:
<input type="number" class="form-control vertical-gap" placeholder="Tel no">
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
EMAIL ADDRESS:
<input id="fillMeIn7" type="email" class="form-control vertical-gap" placeholder="Email address" >
</div>
<div class="col-md-2"></div>
</div>
<div class="row vertical-gap">
<div class="col-md-2"></div>
<div class="col-md-8">
DISCIPLINE:
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Cross Country"> CROSS COUNTRY
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Enduro"> ENDURO
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Downhill"> DOWNHILL
</label>
</div>
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-10">
<!--<button type="button" input type="hidden" class="btn btn-success" name="redirect" value="thanks.html">SUBMIT</button>-->
<input type="submit" value="SUBMIT" class="btn btn-success btn-lg">
</div>
<div class="col-md-2"></div>
</div>
</form>'
Thanks!

You could have the ids in an Array, iterate through its values, and execute the repeatable code in a function that groups all the logic inside.
example :
["fillMeIn1", "fillMeIn2", "fillMeIn3", "fillMeIn4"].each(function(id){
// do things with id
})

Why not use the html "required" property instead?
If you want to do this with JS, you should give each variable a different name. In the code you posted you are continuously overwriting the same variable, and then, it evaluates val (which ended up being assigned to the (fill me7 value) to "", and if true, setting all the borders to red.
Set different variables, push the input values into an array when submit is triggered and loop through them if variables[i]==0, set getElementId(switch case[i] or another array with the name of the inputs[i]).bordercolor to red.
AGAIN, this sound VERY INEFFICIENT and I am not sure at all it would work. My guess is that it would take A LOT of time, and probably get timed out (except you are using some asych/try-catch kind of JS).
I would simply go for an HTML required property and then override the "required" property in CSS to make it look as you intend to. Simpler, easy and clean.

The main issue in your code is that you override the variable val each time you wrote var val = ....
Keeping your own your logic, you could write something like that.
var formModule = (function () {
var $fields = [
document.getElementById('fillMeIn'),
document.getElementById('fillMeIn2'),
document.getElementById('fillMeIn3'),
document.getElementById('fillMeIn4'),
document.getElementById('fillMeIn5'),
document.getElementById('fillMeIn6'),
document.getElementById('fillMeIn7')
];
function markInvalid($field) {
$field.style.borderColor = 'red';
}
function markValid($field) {
$field.style.borderColor = 'green';
}
return {
check: function () {
var isValid = true;
$fields.forEach(function ($f) {
if ($f.value === '') {
if (isValid) alert('Please fill in the missing fields');
isValid = false;
markInvalid($f);
}
else markValid($f);
});
return isValid;
}
};
})();
There are some extra concepts in this example which may be useful:
Working with the DOM is really slow, that's why you should
put your elements in a variable once for all and not everytime you
click on the submit button.
In my example i wrap the code with var formModule = (function () {...})();.
It's called module pattern. The goal is to prevent variables to leak in the rest of the application.
A better solution could be this one using the 'power' of html form validation:
HTML:
<form id="mbrForm" action="thanks.html" method="post">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4 vertical-gap">
FIRST NAME:
<input id="fillMeIn" type="text" required class="form-control" placeholder="First Name">
</div>
<div class="col-md-4 vertical-gap">
LAST NAME:
<input id="fillMeIn2" type="text" required class="form-control" placeholder="Last Name">
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 vertical-gap">
ADDRESS:
<input id="fillMeIn3" type="text" required class="form-control vertical-gap" placeholder="First Line">
<input id="fillMeIn4" type="text" required class="form-control vertical-gap" placeholder="Second Line">
<input id="fillMeIn5" type="text" required class="form-control vertical-gap" placeholder="Town/City">
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4 vertical-gap">
POST CODE:
<input id="fillMeIn6" type="text" required class="form-control vertical-gap" placeholder="Postcode">
</div>
<div class="col-md-4 vertical-gap">
PHONE No:
<input type="number" class="form-control vertical-gap" placeholder="Tel no">
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
EMAIL ADDRESS:
<input id="fillMeIn7" type="email" required class="form-control vertical-gap" placeholder="Email address">
</div>
<div class="col-md-2"></div>
</div>
<div class="row vertical-gap">
<div class="col-md-2"></div>
<div class="col-md-8">
DISCIPLINE:
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Cross Country"> CROSS COUNTRY
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Enduro"> ENDURO
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Downhill"> DOWNHILL
</label>
</div>
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-10">
<input id="btnSubmit" type="submit" value="SUBMIT" class="btn btn-success btn-lg">
</div>
<div class="col-md-2"></div>
</div>
</form>
JS:
var formModule = (function () {
var $form = document.getElementById('mbrForm');
var $btn = document.getElementById('btnSubmit');
var $fields = [
document.getElementById('fillMeIn'),
document.getElementById('fillMeIn2'),
document.getElementById('fillMeIn3'),
document.getElementById('fillMeIn4'),
document.getElementById('fillMeIn5'),
document.getElementById('fillMeIn6'),
document.getElementById('fillMeIn7')
];
checkValidation();
$form.addEventListener('change', checkValidation);
$form.addEventListener('keyup', checkValidation);
$fields.forEach(function ($f) {
$f.addEventListener('change', function () {
markInput($f, $f.checkValidity());
});
});
function checkValidation() {
$btn.disabled = !$form.checkValidity();
}
function markInput($field, isValid) {
$field.style.borderColor = isValid ? 'green' : 'red';
}
})();
In this example, the button gets disabled until the form is valid and inputs are validated whenever they are changed.
I added required attribute in HTML inputs so they can be handled by native javascript function checkValidity(). Note that in this case inputs email and number are also correctly checked. You could also use attribute pattern to get a more powerfull validation:
<input type="text" pattern="-?[0-9]*(\.[0-9]+)?">
Hope it helps.

Error message in contact form

I have created a contact (4 input text) form and I want if user doesn't text in anyone of input a text message will appear above each input.
Contact From:
<form class="form-horizontal" method="post" action="#" name="form" onsubmit="return validation();">
<fieldset>
<div><h2 style="font-family: Myriad Pro;color:#7f8c8c">form</h2></div>
<div class="form-group">
<div class="col-sm-8">
<input id="fname" name="name" type="text" placeholder="Όνομα" class="form-control">
<div id="error1" style="color:#e8645a"></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-8">
<input id="lname" name="surname" type="text" placeholder="Επώνυμο" class="form-control">
<div id="error2" style="color:#e8645a"></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-8 ">
<input id="email" name="email" type="email" placeholder="E-mail" class="form-control">
<div id="error3" style="color:#e8645a"></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 ">
<textarea id="message" name="message" type="text" placeholder="Το σχόλιο σας.." columns="7" rows="7" class="form-control" style="background-color:#e5e6e6;" required=""></textarea>
<div id="error4" style="color:#e8645a"></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-3 text-center">
<button type="submit" class="btn btn-primary btn-block" id="label" >SEND</button>
</div>
</div>
</fieldset>
</form>
And the script I use:
function validation(){
if (document.form.name.value == "") {
document.getElementById('error1').innerHTML="*Error Msg1 ";
}else if (document.form.surname.value == "") {
document.getElementById('error2').innerHTML="*Error Msg2 ";
}else if (document.form.email.value == "") {
document.getElementById('error3').innerHTML="*Error Msg3 ";
}else if (document.form.message.value == "") {
document.getElementById('error4').innerHTML="*Error Msg4 ";
}
return false;
}
My issue is that if for example the user doesn't fill his name(error message displayed below the text field) BUT then if he text his name the error message IS still displayed.How can I solve this?
There is an example here: Fiddle

I would suggest that you clear the error message at the start of the validation again:
function validation(){
document.getElementById('error1').innerHTML=""
document.getElementById('error2').innerHTML=""
document.getElementById('error3').innerHTML=""
document.getElementById('error4').innerHTML=""
//Your validation code below:
...
}
This way whenever the input validates, all of the error messages will be cleared and evaluated again.
You might want to consider storing the labels at the start of the function in a field so you have easy access to them later. This should help with readability as well. For example:
function validation(){
var errorMessage1 = document.getElementById('error1');
//Access the label using your new variable:
errorMessage1.innerHTML = "Your value here"
...

On keyup event lets try resetting the error message
document.form.name.addEventListener("keyup", function(){
document.getElementById('error1').innerHTML = '';
});

How to hide/show a text-box base on other text-box in Laravel 4?

Goal
show email confirm when a user start editing the email section.
hide the email confirm text-box if the user doesn't touch it.
Don't do anything if the user only edit the username part.
Edit Form
username* __________________________
email* __________________________
email confirm* _____________________
HTML/BLADE
<div class="form-group">
<label class="col-sm-3 control-label required ">Username </label>
<div class="col-sm-9 form-group float-label-control ">
{{ Form::text('username', isset($user->username) ? $user->username : '' , array('id'=>'form-field-icon-2')); }}
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label required ">Email </label>
<div class="col-sm-9 form-group float-label-control ">
{{ Form::text('email', isset($user->email ) ? $user->email : '' , array('id'=>'form-field-icon-2')); }}
</div>
</div>

HTML
<label> Username </label><br>
<input type="text" name="username"><br>
<label> Email </label><br>
<input type="text" name="email" id="email"><br>
<label id="l-email-conf" > Email Confirm </label><br>
<input type="text" name="email_confirm" disabled="disabled" id="email-conf">
JS
$('#l-email-conf').hide();
$('#email-conf').hide();
$('#email').on('input', function (event) {
var text = $(this).val();
if (text === '') { // If email is empty
$('#email-conf').prop('disabled', true);
} else {
$('#email-conf').prop('disabled', false);
$('#email-conf').show();
$('#l-email-conf').show();
}
});
JSFiddle

Inline javascript could be an elegant solution if you don't want to write a function.
onkeyup and onkeydown events will do the job and you don't need jQuery
<form>
<p>
<label for="email">Email</label>
<input type="text" name="email" id="email" onkeyup="this.parentNode.nextElementSibling.style.display = 'block';" onkeydown="this.parentNode.nextElementSibling.style.display = 'none';"/>
</p>
<p id="confirm-email">
<label for="confirm">Confirm email</label>
<input type="text" name="confirm" id="confirm"/>
</p>
</form>
CSS:
#confirm-email {
display: none;
}
Example: jsFiddle

Say this is your HTML -
<input type="text" name="username">
<input type="text" name="email" id="email">
<input type="text" name="email_confirm" disabled="disabled" id="email-conf">
<script>
// Use jQuery event handlers
$('#email').on('input', function (event) {
var text = $(this).val();
if (text === '') { // If email is empty
$('#email-conf').prop('disabled', true);
} else {
$('#email-conf').prop('disabled', false);
}
});
</script>
jsFiddle
P.S. - U can toggle hide/show instead of disabling also.