JS function not stopping on return false

LZ1
LZ1 used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Expert of the Year 2014
Top Expert 2014
Commented:
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();
LZ1
Top Expert 2011

Author

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.
Expert of the Year 2014
Top Expert 2014

Commented:
That's it.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
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!).
LZ1
Top Expert 2011

Author

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

Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
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

LZ1
Top Expert 2011

Author

Commented:
Sorry for the delay. That little bit helped me out huge though! Thanks Gary and Chris!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial