From 5fbe9ddb773a3ca8f2a1307d6c5e1378ddd18537 Mon Sep 17 00:00:00 2001 From: Truong Giang Date: Tue, 17 Sep 2024 22:45:03 +0700 Subject: [PATCH 1/2] Do not validate confirmation field when main field loses focus --- js/formidable.js | 77 +++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 67 insertions(+), 10 deletions(-) diff --git a/js/formidable.js b/js/formidable.js index 8d953c528e..a77b6958ef 100644 --- a/js/formidable.js +++ b/js/formidable.js @@ -193,7 +193,7 @@ function frmFrontFormJS() { continue; } - validateFieldValue( field, errors ); + validateFieldValue( field, errors, true ); checkValidity( field, errors ); } } @@ -266,7 +266,7 @@ function frmFrontFormJS() { } if ( errors.length < 1 ) { - validateFieldValue( field, errors ); + validateFieldValue( field, errors, false ); } removeFieldError( $fieldCont ); @@ -277,24 +277,37 @@ function frmFrontFormJS() { } } - function validateFieldValue( field, errors ) { + /** + * Validates a field value. + * + * @since x.x Added `onSubmit` parameter. + * + * @param {HTMLElement} field Field input. + * @param {Object} errors Errors data. + * @param {Boolean} onSubmit Is `true` if the form is being submitted. + */ + function validateFieldValue( field, errors, onSubmit ) { if ( field.type === 'hidden' ) { // don't validate } else if ( field.type === 'number' ) { checkNumberField( field, errors ); } else if ( field.type === 'email' ) { - checkEmailField( field, errors ); + checkEmailField( field, errors, onSubmit ); } else if ( field.type === 'password' ) { - checkPasswordField( field, errors ); + checkPasswordField( field, errors, onSubmit ); } else if ( field.type === 'url' ) { checkUrlField( field, errors ); } else if ( field.pattern !== null ) { checkPatternField( field, errors ); } + /** + * @since x.x Added `onSubmit` to the data. + */ triggerCustomEvent( document, 'frm_validate_field_value', { field: field, - errors: errors + errors: errors, + onSubmit: onSubmit }); } @@ -423,7 +436,38 @@ function frmFrontFormJS() { } } - function checkEmailField( field, errors ) { + /** + * Checks if the confirm field should be checked. + * + * @since x.x + * + * @param {HTMLElement} field Field input. + * @param {Boolean} onSubmit Is `true` if the form is being submitted. + */ + function shouldCheckConfirmField( field, onSubmit ) { + if ( onSubmit ) { + // Always check on submitting. + return true; + } + + if ( 0 === field.id.indexOf( 'field_conf_' ) ) { + // Always check if it's the confirm field. + return true; + } + + return false; + } + + /** + * Check the email field for errors. + * + * @since x.x Added `onSubmit` parameter. + * + * @param {HTMLElement} field Field input. + * @param {Object} errors Errors data. + * @param {Boolean} onSubmit Is `true` if the form is being submitted. + */ + function checkEmailField( field, errors, onSubmit ) { const fieldID = getFieldId( field, true ), pattern = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/i; @@ -432,11 +476,24 @@ function frmFrontFormJS() { errors[ fieldID ] = getFieldValidationMessage( field, 'data-invmsg' ); } - confirmField( field, errors ); + if ( shouldCheckConfirmField( field, onSubmit ) ) { + confirmField( field, errors ); + } } - function checkPasswordField( field, errors ) { - confirmField( field, errors ); + /** + * Check the password field for errors. + * + * @since x.x Added `onSubmit` parameter. + * + * @param {HTMLElement} field Field input. + * @param {Object} errors Errors data. + * @param {Boolean} onSubmit Is `true` if the form is being submitted. + */ + function checkPasswordField( field, errors, onSubmit ) { + if ( shouldCheckConfirmField( field, onSubmit ) ) { + confirmField( field, errors ); + } } function confirmField( field, errors ) { From 89d4d95eed3870ec7f7a5f888dc827eb65a0d16a Mon Sep 17 00:00:00 2001 From: Truong Giang Date: Tue, 17 Sep 2024 22:55:20 +0700 Subject: [PATCH 2/2] Fix eslint --- js/formidable.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/js/formidable.js b/js/formidable.js index a77b6958ef..a2a967273d 100644 --- a/js/formidable.js +++ b/js/formidable.js @@ -284,7 +284,7 @@ function frmFrontFormJS() { * * @param {HTMLElement} field Field input. * @param {Object} errors Errors data. - * @param {Boolean} onSubmit Is `true` if the form is being submitted. + * @param {boolean} onSubmit Is `true` if the form is being submitted. */ function validateFieldValue( field, errors, onSubmit ) { if ( field.type === 'hidden' ) { @@ -442,7 +442,7 @@ function frmFrontFormJS() { * @since x.x * * @param {HTMLElement} field Field input. - * @param {Boolean} onSubmit Is `true` if the form is being submitted. + * @param {boolean} onSubmit Is `true` if the form is being submitted. */ function shouldCheckConfirmField( field, onSubmit ) { if ( onSubmit ) { @@ -465,7 +465,7 @@ function frmFrontFormJS() { * * @param {HTMLElement} field Field input. * @param {Object} errors Errors data. - * @param {Boolean} onSubmit Is `true` if the form is being submitted. + * @param {boolean} onSubmit Is `true` if the form is being submitted. */ function checkEmailField( field, errors, onSubmit ) { const fieldID = getFieldId( field, true ), @@ -488,7 +488,7 @@ function frmFrontFormJS() { * * @param {HTMLElement} field Field input. * @param {Object} errors Errors data. - * @param {Boolean} onSubmit Is `true` if the form is being submitted. + * @param {boolean} onSubmit Is `true` if the form is being submitted. */ function checkPasswordField( field, errors, onSubmit ) { if ( shouldCheckConfirmField( field, onSubmit ) ) {