Custom JavaScript Validation for Forms
This article gives some examples for different ways to validate Siteglide forms on the Front End using JavaScript.
Introduction
When a User submits a Form, we'll check:
- That the User has filled in the fields correctly
- That additional processes like reCaptcha, payment and Secure Zone sign up were successful
For most errors, we'll provide a single error message which can be displayed. For validation errors, we'll provide both the error message and additional messages for each missing field.
Marking a Field as Required
Fields must be marked as "required" in the Admin, and in the HTML of your Form Layout, in order for them to trigger the validation process.
For most fields, we will validate only whether or not a field has been submitted- but for emails we take the extra step of checking whether or not the format of the email is valid. You can either use Siteglide's default validation message, or write your own custom JavaScript. We'll also provide examples of how you can customise the error messages each provide to your users.
Default
For most error messages, the default behaviour will be to display an alert.
You can also use the following line of HTML in your form Form Layout file to output the default JS validation error message at the end of your Form- but by default this will only display for validation type error: <div class="form-error"></div> A class of .input-error gets added to fields if they fail to validate, which you can select with Custom CSS if you wish to show the User that they should be amended.
Passing your Custom Function in as an Argument
You can write your own custom validation by changing:
<button onClick="s_form_submit_v2(this,'form_12');"> to be: <button onClick="s_form_submit_v2(this,'form_12',error);"> where error is the name of your function. e.g.
Formatting your error message
As in the example above, a custom error function will always be passed the main error as its argument. In the past, some of the integrations we worked with passed errors in different formats, which made writing error functions tricky. We've improved this by adding a newfunction: s_error_formatter(error); to sanitize the error message and return the message itself as a String. This means if you include this helper function, you'll always know to expect the message in a String format.
Example Function
Custom Error Messages for Fields
The example below demonstrates the following:
- Displays all kinds of main error messages on the Page
- Does not use alert messages
- Allows you to change the field validation message on a field by field basis in the HTML
Step 1) Add HTML before closing {% endform %} tag <div id="errorSummary" class="alert alert-danger d-none"></div>
Step 2) Add custom error messages to fields in HTML In our custom code for this example, let's invent a data-attribute data-custom-msg to store custom error messages against the field we want to display them for:
Step 3) Add CSS The CSS plays a visual role here, but also a functional one- as the boxes displaying the errors should be hidden when the Form is submitting and the Siteglide class can be used to select for this.
Step 4) Add JavaScript The first part of the function:
- Formats the main error message
- Selects the Form elements it needs
- Deletes old error messages
Next the function loops over the fields with input errors and displays validation messages- after adjusting for any custom messages you've added.
Finally, the function uses a "switch" statement to change the main error message, should you wish (useful for translations) before displaying at the bottom of Page. See the comments in the code for more explanatory details.
Related Articles