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;
}
});
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).
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”.