You are using return statements in your validations, if you return from your 1st validation (name box), the other code blocks will not execute. Use a local boolean to determine your return type and return that at the end of your function, that way, all of your validation code runs. Also, your radio button and checkbox validation logic is flawed, you set an error message on each iteration of the loop if count1 or count2 doesn’t meet your conditions. Change it to something like the following:
function validition() {
let valid = true; //local boolean to return at the end of your function
var phoneinpute = document.getElementById('phone').value;
var radios = document.getElementsByTagName('input');
var value;
var inputs = document.getElementsByTagName("input");
var count1 = 0;
var count2 = 0;
var regex = /(5|0)([0-9]{8})$/;
//Name validation
if (document.getElementById('name').value == "") {
document.getElementById('errorname').innerHTML = "name should not be empty";
document.getElementById('name').style.borderColor = "red";
valid = false;
} else if (document.getElementById('name').value != "") {
document.getElementById('errorname').innerHTML = "";
document.getElementById('name').style.borderColor = "green";
}
//Phone number validation
if (regex.test(phoneinpute)) {
document.getElementById('errorpass').innerHTML = "";
document.getElementById('phone').style.borderColor = "green";
} else {
document.getElementById('errorpass').innerHTML = "Invalide phone number";
document.getElementById('phone').style.borderColor = "red";
valid = false;
}
//Radio button validation
for (var i = 0; i < radios.length; i++) {
if (radios[i].type == "radio" && radios[i].checked) {
count1++;
}
if (count1 == 1) {
document.getElementById('radioerorr').innerHTML = "";
break;
}
}
//check to see if you had a checked radio button, if not, add error
//and mark local boolean as false
if(count1 < 1){
document.getElementById('radioerorr').innerHTML = "one option should be selected";
valid = false;
}
//Checkbox validation
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == "checkbox" && inputs[i].checked) {
count2++;
}
}
//Do your checkbox validation after the for loop
if (count2 > 3 || count2 == 0) {
document.getElementById('checkboxerorr').innerHTML = "please choose at least one car and at most 3 cars";
valid = false;
} else {
document.getElementById('checkboxerorr').innerHTML = "";
}
//return your local boolean value
return valid;
}
Problem :
I tried to build a validation form using JavaScript which handles these errors:
The Name field should not be empty
The phone number field can contain only numbers (exactly 10 numbers)
One option should be selected (radio)
At least one car from checkboxes is selected and at max 3 cars
But the problem with my code is it has not worked in all cases. I mean if I selected submit it shows me the error message just in the name fields, not on other fields.
function validition() {
var phoneinpute = document.getElementById('phone').value;
var radios = document.getElementsByTagName('input');
var value;
var inputs = document.getElementsByTagName("input");
var count1 = 0;
var count2 = 0;
var regex = /(5|0)([0-9]{8})$/;
if (document.getElementById('name').value == "") {
document.getElementById('errorname').innerHTML = "name should not be empty";
document.getElementById('name').style.borderColor = "red";
return false;
} else if (document.getElementById('name').value != "") {
document.getElementById('errorname').innerHTML = "";
document.getElementById('name').style.borderColor = "green";
}
if (regex.test(phoneinpute)) {
document.getElementById('errorpass').innerHTML = "";
document.getElementById('phone').style.borderColor = "green";
//return true;
} else {
document.getElementById('errorpass').innerHTML = "Invalide phone number";
document.getElementById('phone').style.borderColor = "red";
return false;
}
for (var i = 0; i < radios.length; i++) {
if (radios[i].type == "radio" && radios[i].checked) {
count1++;
}
if (count1 == 1) {
document.getElementById('radioerorr').innerHTML = "";
break;
} else {
document.getElementById('radioerorr').innerHTML = "one option should be selected";
return false
}
}
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == "checkbox" && inputs[i].checked) {
count2++;
}
if (count2 > 3 || count2 == 0) {
document.getElementById('checkboxerorr').innerHTML = "please choose at least one car and at most 3 cars";
return false
} else {
document.getElementById('checkboxerorr').innerHTML = "";
}
}
Comments
Comment posted by Nuha
sorry for the spelling and the grammar * my code does not work in all cases
Comment posted by Funk Forty Niner
Is this really a php question?
Comment posted by Nuha
no, but I tried to bring the php programmer here lol
Comment posted by Ryan Wilson
@XAN What is wrong with the answer I provided you below? The
Comment posted by Nuha
thank you so much it works now, but except for the checkbox validation it gives me an errors message even if I choose more than 3 options
Comment posted by Ryan Wilson
@XAN Please see my most recent edit, I had to fix the logic on that as well.
Comment posted by Ryan Wilson
@XAN You could also improve this, by using the same collection on your
Comment posted by Nuha
thank you, I tried your update but instead of fixing the checkbox error the whole form does not give any error message. For example, name is empty it does not show the red message
