AEM Core Components Form field Validation on submit

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.

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.

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.

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/