Weird label re-writing issue with change event on field valuation

JavaScript
1

I’ve got this weird label re-writing issue with my change event which I’m using to reset a fields value if the user isn’t entering a valid number.

The label I’m having written is re-writing itself in a loop like fashion but it looks tied to the opacity change - I think?


$('.amt, .wmn_amt').change(function(){
	//make sure the user has entered a real number
	if (this.value == '' || /[^\\d\\.]/g.test(this.value)){
		// Notify user that they need to enter a valid number prior to submitting
		$(this).before('<label class="amt_error">Please provide a valid donation amount</label>'); // offending line
		$(this).val('').change();
		return false;
	}else{
		$(this).siblings('.amt_error').fadeOut(1000);
		return true;
	}
});

How can I avoid this?

Thanks

2

Why do you have the line


  $(this).val('').change();

in there? It would seem this one causes the loop …

BTW. Your regex doesn’t take into account negative numbers. I don’t know if you want to, but if you do you should use /^-?[^\d\.]$/g

It would anyway be better to use /[1]$/g, since that makes sure the whole string is made up of numbers.

/[^\d\.]/g also matches “hello123bye”, /[2]$/g doesn’t

If you really want to do it correctly it should be /^-?\d+(\.\d+)?$/g
Allowing negative numbers, only one decimal point (your regex allows multiple, like 1.221.2112, which is obviously not a valid number), and the decimal point and the decimals are optional (don’t force users to write 4 as 4.00).

  1. ^\d\. ↩︎

  2. ^\d\. ↩︎

3

Hey, thanks for responding -

Let me work backwards and address the regex questions first because I think my answers will provide a bit more context.

The regex is checking an input on an e-commerce type site for a non-profit charitable organization that is taking in donations.

We don’t want to allow users the ability to enter negative numbers. The aim of this function is to deliver a message to the user if they enter a “non-valid monetary amount”; hence the message contained within the label that is written to the page “Please provide a valid donation amount.”

The line you’ve quoted


  $(this).val('').change();

is intended to “reset” the value of the field if the user doesn’t enter a “valid monetary amount”.

Originally, I had:


  $(this).val('');

which didn’t create the loop like problem; but for every attempt the user makes (sequentially - one after the other) that does not meet the regex requirements a new error label is written over the one written on the prior attempt.

So as a result I get:


<label class="amt_error">Please provide a valid donation amount</label>
<label class="amt_error">Please provide a valid donation amount</label>
<label class="amt_error">Please provide a valid donation amount</label>
<label class="amt_error">Please provide a valid donation amount</label>

if the user attempts to enter 4 invalid amount is a row.

I think I can rectify this by simply placing the line that writes the label within a condition that checks the labels “display” property and executes only if the labels display is set to “none”.

4

$(‘.amt, .wmn_amt’).change(function(){
$(“.amt_error”).remove();
…

?