AEM Core Components Form field Validation on submit

[georhe6]

In our project, there is a requirement to develop forms using Core component forms (not Adaptive forms). However, I am struggling to find a reference to implement custom JavaScript validation. Many documents explain the default HTML error messages that appear on fields, but what we are looking for is custom JavaScript validation.

Is it possible to implement clientLib at each field level (eg: Form text field, form option, form submit)

Please share some leads.

Thanks

Geo

Thanks

Geo

[Mahesh_Gunaje]

Hi @georhe6 

You can create a proxy component, having resource: superType as core Form components.  Similarly you need to create custom components for your form fields. Note: For the text fields(First Name, Last name, any other text field) that you use in your form, you can create a single custom component only. Then, using component Dialog, you can set: whether the field is required or not. Custom error message etc. Create custom submit component, which validates all the field. Trust me, this is not a simple task. If you are working on agile/sprint wise, then take POC task to find out the feasibility and to provide effort estimation for the actual work.

[kapil_rajoria · Accepted solution]

Hi @georhe6 , first you can make a proxy component and set its super resource type to core form component. Then, try to get the dialog file of the core form component from the CRX DE, make a package for the same and copy paste the whole structure in your code base (.content.xml file). Now, for the fields you don't want...you can just delete them as they will be coming from the parent (delete the <field ....>...</field> structure). For the remaining ones you want to apply JS, use the common procedure i.e how to apply custom JS on dialog. Please refer below link:
https://medium.com/activate-aem/loading-custom-js-in-an-aem-dialog-6b31e9a36743

[arunpatidar]

Hi @georhe6 
If you need to perform client-side validation, create your own clientlibs, load them on the page, and use JavaScript to listen for the submit event and perform the validation. For dialog validation, you should validate the fields and return true to proceed with the form or dialog submission. However, in this case, the clientlibs category will be different, and you will need to implement custom error messages.

document.addEventListener('DOMContentLoaded', function() {
    // Get the form element
    var form = document.querySelector('form');
    
    if (form) {
        // Add submit event listener
        form.addEventListener('submit', function(event) {
            var isValid = true;

            // Example: Validate if a text field is not empty
            var textField = form.querySelector('input[name="textFieldName"]');
            if (textField && textField.value.trim() === '') {
                isValid = false;
                alert('Text field cannot be empty');
            }

            // If the form is invalid, prevent submission
            if (!isValid) {
                event.preventDefault();
            }
        });
    }
});

[PGURUKRISHNA]

Hi @georhe6 

Yes, it is possible to implement custom JavaScript validation at each field level using clientLib. Here's a high-level overview of the approach:

Step 1: Create a clientLib

Create a new clientLib in your AEM project, which will contain your custom JavaScript validation code. You can do this by creating a new folder under /apps/your-project/clientlibs and adding a categories property to the clientlib.config file.

Step 2: Include the clientLib in your form

In your form component, include the clientLib by adding a data-clientlib attribute to the form element. For example:

<form data-clientlib="your-clientlib-name">
<!-- form fields here -->
</form>

Step 3: Write custom JavaScript validation

In your clientLib JavaScript file, write custom validation functions for each field type (e.g., text field, option field, submit button). You can use the addEventListener method to attach validation functions to the form fields.

For example, to validate a text field

// your-clientlib-name.js
document.addEventListener("DOMContentLoaded", function() {
const textField = document.querySelector("input[type='text']");
textField.addEventListener("blur", function() {
// custom validation logic here
if (this.value.length < 5) {
console.log("Text field must be at least 5 characters long.");
// display error message or highlight the field
}
});
});

Step 4: Integrate with form submission

To prevent form submission if validation fails, you can add an event listener to the form's submit event. For example:

document.addEventListener("DOMContentLoaded", function() {
const form = document.querySelector("form");
form.addEventListener("submit", function(event) {
// call custom validation functions for each field
if (!validateTextField() ||!validateOptionField() ||...) {
event.preventDefault();
console.log("Form validation failed.");
}
});
});

These are the basic steps to implement custom JavaScript validation using clientLib at each field level. You can customize and extend this approach to fit your specific requirements.

[BrianKasingli]

Hi there, you're going to have to go back to the basics with HTML and JavaScript. Here is a Javascript Revealing Pattern that I have created for you. What it does here is add event listener after when the dom is ready. In this example you can realize that I am passing an HTML attribute down to the JavaScript, so that it can use the error message and display the error message to the screen.

In my opinion, when following the Javascript Revealing Pattern, all private variables and methods should be prefixed with a _ underscore. You should be able to find more JavaScript code online to understand how create form validation with vanilla JS.

It's just an example for how you can use AEM backend sightly to pass down HTML attributes into the JS. The form is not submittable in this example, but just showing some ideas.

https://jsfiddle.net/akyp4wx1/1/