@@ -24,37 +24,54 @@ const INPUT_TYPES = {
2424 STRING : ' STRING'
2525};
2626
27+ const VALIDATION_MESSAGES = {
28+ ARRAY_FORMAT_MISMATCH : __ (
29+ ' The value must be a valid JSON array format: [1,2,3] or [{"key": "value"}]'
30+ ),
31+ GENERAL_FORMAT_MISMATCH : __ (' Please match the requested format.'
32+ NUMBER_TYPE_MISMATCH : __ (' The value must contain only numbers.'
33+ REGEX_MISMATCH : __ (' The value must match the defined regular expression.'
34+ VALUE_MISSING : __ (' This is required and must be defined.'
35+ };
36+
2737const feedbackMap = {
2838 arrayFormatMismatch: {
2939 isInvalid : (el ) => {
3040 if (el .dataset .jsonArray !== ' true' || ! el .value ) return false ;
3141
3242 try {
33- const parsed = JSON .parse (el .value );
34- return ! Array .isArray (parsed);
43+ const isValid = Array .isArray (JSON .parse (el .value ));
44+ // we use setCustomValidity to set the message that appears when the user clicks submit
45+ el .setCustomValidity (isValid ? ' ' : VALIDATION_MESSAGES .GENERAL_FORMAT_MISMATCH );
46+ return ! isValid;
3547 } catch {
48+ el .setCustomValidity (VALIDATION_MESSAGES .GENERAL_FORMAT_MISMATCH );
3649 return true ;
3750 }
3851 },
3952 message: __ (' The value must be a valid JSON array format: [1,2,3] or [{"key": "value"}]'
4053 },
4154 numberTypeMismatch: {
4255 isInvalid : (el ) => {
43- return (
56+ const isInvalid =
4457 el .dataset .fieldType === INPUT_TYPES .NUMBER &&
4558 el .value &&
46- ! Number .isFinite (Number (el .value ))
47- );
59+ ! Number .isFinite (Number (el .value ));
60+
61+ // we use setCustomValidity to set the message that appears when the user clicks submit
62+ el .setCustomValidity (isInvalid ? VALIDATION_MESSAGES .GENERAL_FORMAT_MISMATCH : ' '
63+
64+ return isInvalid;
4865 },
49- message: __ ( ' The value must contain only numbers. ' ) ,
66+ message: VALIDATION_MESSAGES . NUMBER_TYPE_MISMATCH ,
5067 },
5168 regexMismatch: {
5269 isInvalid : (el ) => el .validity ? .patternMismatch ,
53- message: __ ( ' The value must match the defined regular expression. ' ) ,
70+ message: VALIDATION_MESSAGES . REGEX_MISMATCH ,
5471 },
5572 valueMissing: {
5673 isInvalid : (el ) => el .validity ? .valueMissing ,
57- message: __ ( ' This is required and must be defined. ' ) ,
74+ message: VALIDATION_MESSAGES . VALUE_MISSING ,
5875 },
5976};
6077
@@ -116,6 +133,13 @@ export default {
116133 const field = this .form .fields [this .item .name ];
117134 return this .isArrayType && field? .feedback === feedbackMap .arrayFormatMismatch .message ;
118135 },
136+ hasNumberTypeError () {
137+ const field = this .form .fields [this .item .name ];
138+ return (
139+ this .item .type === INPUT_TYPES .NUMBER &&
140+ field? .feedback === feedbackMap .numberTypeMismatch .message
141+ );
142+ },
119143 hasValidationFeedback () {
120144 return Boolean (this .validationFeedback );
121145 },
@@ -137,9 +161,9 @@ export default {
137161 : feedback;
138162 },
139163 validationState () {
140- // Override validation state for array format errors
141- // This handles cases where checkValidity() returns true but our custom array validation fails
142- if (this .hasArrayFormatError ) {
164+ // Override validation state for array format errors and number type errors for our custom validation
165+ // This is also responsible for turning the border red when the input is invalid
166+ if (this .hasArrayFormatError || this . hasNumberTypeError ) {
143167 return false ;
144168 }
145169
0 commit comments