I have a field that is calculated from other fields using JavaScript. I have entered the valid number range from 0-25 in the attributes for the field. While testing the form, when the number in the field is over 25 nothing happens. What am I missing?
Question
Question
Answer
Are you saying that no validation occurs (no message stating "Value must be less than or equal to 25") after your javascript runs and inputs a number larger than 25 into the field?
Does the validation occur if you try to submit the form or if you place the focus into the field that stores the final value and then click or tab out of it?
The number validation won't run automatically, but if that's what you're looking for, you might want to consider doing the validation in javascript. Below is an example where it adds the values from a couple of fields and then stores the total into another field. If the total falls outside of the range of 0 to 25, then it will display a message as well as disable the "Submit" button. The fields I'm adding use the CSS class, sum, and the field that stores the total uses the CSS class, total.
$(document).ready(function () { $(document).on('blur change', '.sum input', sumtotal); function sumtotal() { var s = 0; $('.sum input').each(function () { s += parseNumber($(this).val()); }); $('.total input').val(s); if ((s < 0) || (s > 25)) { if ($('.totalWarning').length == 0) { $('<p class="totalWarning">The total must be between 0 and 25.</p>').insertAfter('.total'); $('.Submit').attr('disabled', true); } } else { $('p.totalWarning').remove(); $('.Submit').removeAttr('disabled'); } } function parseNumber(n) { var f = parseFloat(n); //Convert to float number. return isNaN(f) ? 0 : f; //treat invalid input as 0; } });
Replies
Yes I am saying there is no message that pops up if the calculated number is over 25. Not sure what you mean in your third paragraph about the not running automatically. I thought that putting a range validation in the field would give you some kind of message. I'm trying to avoid using JavaScript since we don't have anyone on site that is knowledgeable with it.
See the video here. The form on the left does validation in javascript using the code I provided previously. The form on the right just relies on the 0-25 range configured in the number field.
You'll see that the javascript validation occurs immediately after I fill out the fields that get added together. For the other form, the validation doesn't occur until I try to submit the form or until I place the cursor focus into the field that stores the total and then click out of it.