Improve client-side validation of numerical inputs

This commit is contained in:
Oliver 2021-10-26 07:52:29 +11:00
parent 2d910022ac
commit cbbad98fea

View File

@ -645,7 +645,7 @@ function submitFormData(fields, options) {
if (!validateFormField(name, options)) { if (!validateFormField(name, options)) {
data_valid = false; data_valid = false;
data_errors[name] = ['{% trans "Enter a valid input" %}']; data_errors[name] = ['{% trans "Enter a valid number" %}'];
} }
break; break;
default: default:
@ -798,10 +798,26 @@ function getFormFieldElement(name, options) {
} }
/*
* Check that a "numerical" input field has a valid number in it.
* An invalid number is expunged at the client side by the getFormFieldValue() function,
* which means that an empty string '' is sent to the server if the number is not valud.
* This can result in confusing error messages displayed under the form field.
*
* So, we can invalid numbers and display errors *before* the form is submitted!
*/
function validateFormField(name, options) { function validateFormField(name, options) {
if (getFormFieldElement(name, options)) { if (getFormFieldElement(name, options)) {
return document.getElementById(`id_${name}`).validity.valid;
var el = document.getElementById(`id_${name}`);
if (el.validity.valueMissing) {
// Accept empty strings (server will validate)
return true;
} else {
return el.validity.valid;
}
} else { } else {
return false; return false;
} }