We Keep Coding

Form validation function not executing on click of anchor tag

The code below is meant to validate the first page of a form with JavaScript, before going to the next page.
But when I load the page it only alerts "Organization Name can't be blank'. And goes to the next page, without executing the rest of the function to validate the form. Pls what do I need to adjust next?
The form has 3 pages and users are meant to fill the first page with information in the required format before clicking on the Next which takes the user to page 2. Hence the form validation. The anchor tag acts as the Next button. Thanks!
Next
The form tag:
anchor tag: Next
The function :
function validateForm() {
if (orgname === null || orgname === "") {
alert("Organization Name can't be blank.");
return false;
} else if (msnstatement === null || msnstatement === "") {
alert("Mission can't be blank.");
return false;
}
else if (orgsize == null || orgsize == "") {
alert("Size can't be blank.");
return false;
}
else if (orgview == null || orgview == "") {
alert("Overview can't be blank.");
return false;
} else return true;
}
``

The return statement stops the execution of a function and returns a value.
https://www.w3schools.com/jsref/jsref_return.asp
function validateForm() {
var isValid = true
if (orgname === null || orgname === "") {
alert("Organization Name can't be blank.");
isValid = false
}
if (msnstatement === null || msnstatement === "") {
alert("Mission can't be blank.");
isValid = false;
}
if (orgsize == null || orgsize == "") {
alert("Size can't be blank.");
isValid = false;
}
if (orgview == null || orgview == "") {
alert("Overview can't be blank.");
isValid = false;
}
return isValid;
}

How to check if switch is true or not to hide the div?

I have some problem when I check the function validation, I need when checking all the cassis is true hide the parent div * errors message *
var error_pass = false;
$('#pass').focusout(function(){
check_pass();
error_pass = false;
if(error_pass !== true){
console.log('its showing!');
}else{
$('.test').fadeOut('522');
}
});
function check_pass() {
var fpass= $('#pass').val();
switch(error_pass = true){
case(fpass.length < 6 ? $('#pass-error-message3').css('color','red'):$('#pass-error-message3').css('color','green') ):
$('#pass-error-message3').show();
case(fpass.search(/(?=.[a-z])(?=.*[A-Z])/) == -1 ? $('#pass-error-message4').css('color','red') : $('#pass-error-message4').css('color','green')):
$('#pass-error-message4').show();
case(fpass.search(/\d/) == -1 ? $('#pass-error-message2').css('color','red'):$('#pass-error-message2').css('color','green')):
$('#pass-error-message2').show();
default:break;
}
}

Use if else statements like this
function validation() {
var error = false;
if (fpass.length < 6) {
error = true;
$('#pass-error-message3').css('color', 'red').show();
} else {
$('#pass-error-message3').css('color', 'green');
}
if (fpass.search(/(?=.[a-z])(?=.*[A-Z])/) == -1) {
error = true;
$('#pass-error-message4').css('color', 'red').show();
} else {
$('#pass-error-message4').css('color', 'green')
}
if(fpass.search(/\d/) == -1){
error = true;
$('#pass-error-message2').css('color','red').show();
}else{
$('#pass-error-message2').css('color','green');
}
if(error === false){
hideParentDiv(); // Here hide the div
}
}
Much cleaner approach

show multiple alert in one message in jquery

I have multiple required field controls on my aspx form.
Now what I want is to show the validation message on button click if anything is not filled or checked.
I want it on one message in JQuery.
Here is my JQuery code:-
$(document).ready(function () {
$('#btnSave').click(function (e) {
if (!validateTitle() || !validatePrefix() || !validateTextBoxes()) {
e.preventDefault();
}
});
function validateTitle() {
if ($("#ddlTitle").val() > "0") {
if ($("#ddlTitle").val() == "1104" && $("#txtTitle").val() === "") {
alert("Please enter the text in other title");
return false;
}
return true;
} else {
alert('Please select the title');
return false;
}
}
function validatePrefix() {
if ($("#ddlPrefix").val() > "0") {
if ($("#ddlPrefix").val() == "1110" && $("#txtPrefix").val() === "") {
alert("Please enter the text in other prefix");
return false;
}
return true;
} else {
alert('Please select the prefix');
return false;
}
}
function validateTextBoxes() {
if ($("#txtFirstName").val() === "") {
alert('First name is required');
return false;
}
if ($("#txtMiddleName").val() === "") {
alert('Middle name is required');
return false;
}
if ($("#txtLastName").val() === "") {
alert('Last name is required');
return false;
}
if ($("#txtFatherName").val() === "") {
alert('Father name is required');
return false;
}
if ($("#txtCurrentCompany").val() === "") {
alert('Current company is required');
return false;
}
if ($("#txtDateofJoin").val() === "") {
alert('Date is required');
return false;
}
if ($("#txtCurrentExp").val() === "") {
alert('Current Experience is required');
return false;
}
return true;
}
});

Try below code
var ErrArr = [];
$(document).ready(function () {
$('#btnSave').click(function (e) {
e.preventDefault();
validateTitle();
validatePrefix();
validateTextBoxes();
if(ErrArr.length > 0) {
alert(ErrArr.join("\n"));
ErrArr = [];
return false;
}
});
function validateTitle() {
if ($("#ddlTitle").val() > "0") {
if ($("#ddlTitle").val() == "1104" && $("#txtTitle").val() === "") {
ErrArr.push("Please enter the text in other title");
}
} else {
ErrArr.push('Please select the title');
}
}
function validatePrefix() {
if ($("#ddlPrefix").val() > "0") {
if ($("#ddlPrefix").val() == "1110" && $("#txtPrefix").val() === "") {
ErrArr.push("Please enter the text in other prefix");
}
} else {
ErrArr.push('Please select the prefix');
}
}
function validateTextBoxes() {
if ($("#txtFirstName").val() === "") {
ErrArr.push('First name is required');
}
if ($("#txtMiddleName").val() === "") {
ErrArr.push('Middle name is required');
}
if ($("#txtLastName").val() === "") {
ErrArr.push('Last name is required');
}
if ($("#txtFatherName").val() === "") {
ErrArr.push('Father name is required');
}
if ($("#txtCurrentCompany").val() === "") {
ErrArr.push('Current company is required');
}
if ($("#txtDateofJoin").val() === "") {
ErrArr.push('Date is required');
}
if ($("#txtCurrentExp").val() === "") {
ErrArr.push('Current Experience is required');
}
}
});

Instead of using alert all the time, save the message to a variable instead.
Then alert that message after all tests are done.
$(document).ready(function () {
var message = "";
$('#btnSave').click(function (e) {
message = "";
if (!validateTitle() || !validatePrefix() || !validateTextBoxes()) {
e.preventDefault();
alert(message);
}
});
function validateTitle() {
if ($("#ddlTitle").val() > "0") {
if ($("#ddlTitle").val() == "1104" && $("#txtTitle").val() === "") {
message += "Please enter the text in other title\n";
return false;
}
return true;
} else {
message += 'Please select the title\n';
return false;
}
}
....
});

Use the following fiddle [JSFiddle][1] , this will basically push all the error messages into an array and can show the results.
Please update if this works for you as i am not aware of markup

Just a simple trick you can do
just use a string variable for messages appending and counter.
$(document).ready(function () {
var Messages;
var counter=0;
$('#btnSave').click(function (e) {
validateTitle();
validatePrefix();
validateTextBoxes();
if(counter > 0)
{
alert(Messages);
e.preventDefault();
counter=0;
}
});
function validateTitle() {
debugger;
if ($("#ddlTitle").val() > "0") {
if ($("#ddlTitle").val() == "1104" && $("#txtTitle").val() === "") {
Messages += "Please enter the text in other title";
Messages += "\n";
counter ++;
}
} else {
Messages += 'Please select the title';
Messages += "\n";
counter ++;
}
}
function validatePrefix() {
debugger;
if ($("#ddlPrefix").val() > "0") {
if ($("#ddlPrefix").val() == "1110" && $("#txtPrefix").val() === "") {
Messages += "Please enter the text in other prefix";
Messages += "\n";
counter ++;
}
} else {
Messages += 'Please select the prefix';
Messages += "\n";
counter ++;
}
}
function validateTextBoxes() {
debugger;
if ($("#txtFirstName").val() === "") {
Messages += 'First name is required';
Messages += "\n";
counter ++;
}
if ($("#txtMiddleName").val() === "") {
Messages += 'Middle name is required';
Messages += "\n";
counter ++;
}
if ($("#txtLastName").val() === "") {
Messages += 'Last name is required';
Messages += "\n";
counter ++;
}
if ($("#txtFatherName").val() === "") {
Messages += 'Father name is required';
Messages += "\n";
counter ++;
}
if ($("#txtCurrentCompany").val() === "") {
Messages += 'Current company is required';
Messages += "\n";
counter ++;
}
if ($("#txtDateofJoin").val() === "") {
Messages += 'Date is required';
Messages += "\n";
counter ++;
}
if ($("#txtCurrentExp").val() === "") {
Messages += 'Current Experience is required';
Messages += "\n";
counter ++;
}
}
});
Just update counter and impliment check if check > 0 show message
(alert)
it will benefit you two things
User dont need to click each time and get alert.. dont need to
return false.user Must know at once what erors are in form.
Secondly code is simple/Simple logic.

Try this.
$(document).ready(function () {
var Errors = [];
$('#btnSave').click(function (e) {
if (!validateTitle() || !validatePrefix() || !validateTextBoxes()) {
if(Errors.length > 0) {
alert(Errors.join("\n"));
}
e.preventDefault();
}
});
function validateTitle() {
if ($("#ddlTitle").val() > "0") {
if ($("#ddlTitle").val() == "1104" && $("#txtTitle").val() === "") {
Errors.push("Please enter the text in other title");
}
return true;
} else {
Errors.push('Please select the title');
}
}
function validatePrefix() {
if ($("#ddlPrefix").val() > "0") {
if ($("#ddlPrefix").val() == "1110" && $("#txtPrefix").val() === "") {
Errors.push("Please enter the text in other prefix");
}
return true;
} else {
Errors.push('Please select the prefix');
}
}
function validateTextBoxes() {
if ($("#txtFirstName").val() === "") {
Errors.push('First name is required');
}
if ($("#txtMiddleName").val() === "") {
Errors.push('Middle name is required');
}
if ($("#txtLastName").val() === "") {
Errors.push('Last name is required');
}
if ($("#txtFatherName").val() === "") {
Errors.push('Father name is required');
}
if ($("#txtCurrentCompany").val() === "") {
Errors.push('Current company is required');
}
if ($("#txtDateofJoin").val() === "") {
Errors.push('Date is required');
}
if ($("#txtCurrentExp").val() === "") {
Errors.push('Current Experience is required');
}
return true;
}
});
Add perfect separation in each message to differentiate it.

Check box validation issue?

I have the following code to validate if any of three checkboxes are not checked:
function checkBoxes(form) {
if (
form.checkbox1.checked == false ||
form.checkbox2.checked == false ||
form.checkbox3.checked == false)
{
alert ('must fill in the last 3 checkboxes');
return false;
} else {
return true;
}
}
And called once submitted via a submit button:
<form method="post" onsubmit="return checkBoxes(this);">`
It doesn't work, why exactly?

<script type="text/javascript">
function checkBoxes(form) {
if (
form.checkbox1.checked == null ||
form.checkbox2.checked == null ||
form.checkbox3.checked == null)
{
alert ('checkbox is null');
return false;
}
else if (
form.checkbox1.checked == false ||
form.checkbox2.checked == false ||
form.checkbox3.checked == false)
{
alert ('must fill in the last 3 checkboxes');
return false;
} else {
return true;
}
}
</script>
Add that to know if a checkbox is null

Radio button validation causing rest of validation to fail

The radio validation works but then the rest don't. What have I done wrong?
function validateRadio(radios) {
for (i = 0; i < radios.length; ++i) {
if (radios[i].checked) return true;
}
return false;
}
function validateForm() {
if (validateRadio(document.forms["pancettaForm"]["updateShip"])) {
return true;
} else {
alert("Please tell us how you would like to update your order.");
return false;
}
}
var x = document.forms["pancettaForm"]["order-number"].value;
if (x == null || x == "") {
alert("Please provide your order number.");
return false;
}
var x = document.forms["pancettaForm"]["full-name"].value;
if (x == null || x == "") {
alert("Please provide your full name, or the recipients name if you are updating shipping information.");
return false;
}
var x = document.forms["pancettaForm"]["phone"].value;
if (x == null || x == "") {
alert("Please provide a phone number in case of delivery questions.");
return false;
}
var display = document.getElementById('address').style.display;
if (display == 'block') {
var x = document.forms["pancettaForm"]["address"].value;
if (x == null || x == "") {
alert("Please provide your address.");
return false;
}
}
var display = document.getElementById('city').style.display;
if (display == 'block') {
var x = document.forms["pancettaForm"]["city"].value;
if (x == null || x == "") {
alert("Please provide your city.");
return false;
}
}
var display = document.getElementById('state').style.display;
if (display == 'block') {
if (document.pancettaForm.state.value == "- Select State -") {
alert("Please provide your state.");
return false;
}
}
var display = document.getElementById('zip').style.display;
if (display == 'block') {
var x = document.forms["pancettaForm"]["zip"].value;
if (x == null || x == "") {
alert("Please provide your zip code.");
return false;
}
}
var display = document.getElementById('newShipDate').style.display;
if (display == 'block') {
if (document.pancettaForm.state.value == "- Select Date -") {
alert("Please choose your new shipping date.");
return false;
}
}

Just reverse the test so you do not have to return
if(!validateRadio (document.forms["pancettaForm"]["updateShip"]))
{
alert("Please tell us how you would like to update your order.");
return false;
}
// continue
You had the end bracket after the test of the radios so the rest of the script just floated in cyberspace
Also return true only once at the end and do not have var x multiple times and be consistent in how you access the form elements and I also fixed your date test which was testing state
function validateForm() {
var x,display,form = document.forms["pancettaForm"];
if (!validateRadio(form["updateShip"])) {
alert("Please tell us how you would like to update your order.");
return false;
}
x = form["order-number"].value;
if (x == null || x == "") {
alert("Please provide your order number.");
return false;
}
x = form["full-name"].value;
if (x == null || x == "") {
alert("Please provide your full name, or the recipients name if you are updating shipping information.");
return false;
}
x = form["phone"].value;
if (x == null || x == "") {
alert("Please provide a phone number in case of delivery questions.");
return false;
}
display = form["address"].style.display;
if (display == 'block') {
x = form["address"].value;
if (x == null || x == "") {
alert("Please provide your address.");
return false;
}
}
display = form["city"].style.display;
if (display == 'block') {
x = form["city"].value;
if (x == null || x == "") {
alert("Please provide your city.");
return false;
}
}
display = form['state'].style.display;
if (display == 'block') {
x = form['state'].value;
if (x == "- Select State -") {
alert("Please provide your state.");
return false;
}
}
display = form['zip'].style.display;
if (display == 'block') {
x = form["zip"].value;
if (x == null || x == "") {
alert("Please provide your zip code.");
return false;
}
}
display = form["newShipDate"].style.display;
if (display == 'block') {
x = form["newShipDate"].value;
if (x.value == "- Select Date -") {
alert("Please choose your new shipping date.");
return false;
}
}
return true;
}