JS function not stopping on return false

Hey Experts!!

I'm no expert at javascript. However, I've been able to muddle my way through.  I have the function below.  Now it fires after a click event.  However, if there's an error, it should stop but it's not. It processes the rest of the form, providing there are no more errors.  I can't seem to get it.

function ageValidation() {
    $('.age-input').each(function (event) {
        // var checkNumber = parseInt($(this).val(), 10);
        var checkNumber = $(this).val();
          if (checkNumber < defaultAge || checkNumber === '') {
            $(this).parent().addClass('input-error');
            $(this).parent().removeClass('small');
            $(this).parent().addClass('big');
            $('.age-entry .error').css('display', 'block');
            $('.age-entry .error').html('Please input a numeric age 21 or over');
            return false;
        } else {
          $(this).parent().removeClass('input-error');
        }
      });
    return false;
}

//Here's where the function is called on click
//click function
  $('a.calculate').click(function (event) {
    //Error checking to make sure age is over 21
    ageValidation();

    var county = $('#county').val();
    if (countyBasePremium[county] === undefined) {
      countyError();
      return false;
    }

      var income = $("#incomeSelect").val();
      var incomeScrubbed = income.match(/^\$?[\d,]+(\.[\d]*)?$/);
      if (income === "" || !incomeScrubbed || income === '') {
        incomeError();
        return false;
      }
  

Open in new window

LVL 30
LZ1Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
The logic is

$('a.calculate').click(function (event) {
event.preventDefault() // stop any default action occurring
errors=0;  // set up a temporary var for storing if there is an error.

    if (countyBasePremium[county] === undefined) {
      countyError();
      errors=1;
    }
...
...
if errors=1 then stop

Open in new window


You seem to have missed some code off so I don't know what should happen

Don't use/rely on return false();
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
LZ1Author Commented:
Sorry for the missing code. I was trying to spare the experts from having to read through everything.

Basically, have a global var and set it if there's an error. If there is, stop and run my error functions. If there's not, then continue.
0
GaryCommented:
That's it.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Chris StanyonWebDevCommented:
Only seeing part of the code makes it a little tricky. What exactly is the problem?

Currently it looks like you're stopping the click() function based on county and income. If either of those if statements are true (i.e. you have an error), then you call an error function and then stop the code. You've got no logic in place to stop the click() based on age!

As Gary pointed out, your clicks are on a A tag, so you should also prevent the default action (which for an A tag is following the link!).
0
LZ1Author Commented:
Thanks guys.  So this is what I ended up with. It works, but it's not pretty at all. I'm still a JS novice, so excuse the poor excuse of code below. I'm definitely open to suggestions on how to improve it.

$('a.calculate').click(function (event) {

    var county = $('#county').val();
    var income = $("#incomeSelect").val();
    var incomeScrubbed = income.match(/^\$?[\d,]+(\.[\d]*)?$/);

    $('.age-input').each(function () {
      var checkNumber = $(this).val();
      if (checkNumber < defaultAge || checkNumber === '') {
        stopError = true;
        $(this).parent().addClass('input-error');
        $(this).parent().removeClass('small');
        $(this).parent().addClass('big');
        ageError();
        return stopError;
      } else {
          $(this).parent().removeClass('input-error');
          stopError = false;
      }
    });

    if (stopError === true) {
      } else {
        stopError = false;
          if (countyBasePremium[county] === undefined || county === undefined || county === "") {
            stopError = true;
            countyError();
          }else{
            stopError = false;
              if (income === "" || !incomeScrubbed || income === '') {
                stopError = true;
                incomeError();
              }else{
                stopError = false;
              }
          }
      }

    // Error handling
    if (stopError === true) {

    } else {

Open in new window

0
Chris StanyonWebDevCommented:
Right. It might be easier to tell us in layman's terms what you are trying to achieve. I can't quite get it from following your code. Difficult not seeing the HTML as well.

Couple of issues I can see though.

In your each() code you will overwrite the stopError variable each time through, so that's not a good start.

You have 2 (if stopError === true) block - can't see why!

Your logic is also flawed. You have several statements setting stopError to false, but surely once an error has occurred, you shouldn't reset stopError to false.

Have a look at this (untested) code and see if it makes sense:

$('a.calculate').click(function (event) {

	//We don't want to follow the link
	event.preventDefault();

	var county = $('#county').val();
	var income = $("#incomeSelect").val();
	var incomeScrubbed = income.match(/^\$?[\d,]+(\.[\d]*)?$/);

	//let's start on a positive note
	var stopError = false;
	    
	$('.age-input').each(function () {
		var checkNumber = $(this).val();
	
		if (checkNumber < defaultAge || checkNumber === '') {
			//we have an error
			ageError();
			stopError = true;
			$(this).parent().addClass('input-error big').removeClass('small');
		} else {
			$(this).parent().removeClass('input-error');
		}
	});
	
	
	if (!stopError) {
	//we have no errors so far
		if (countyBasePremium[county] === undefined || county === undefined || county === "") {
			countyError();
			stopError = true;
		}
	}
	
	if (!stopError) {
	//we still have no errors
		if (income === "" || !incomeScrubbed || income === '') {
			incomeError();
			stopError = true;
		}	
	}
	
	
	if (stopError) {
		//We have some errors so do whatever you need to	
	}
	
});

Open in new window

0
LZ1Author Commented:
Sorry for the delay. That little bit helped me out huge though! Thanks Gary and Chris!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.