website logo
⌘K
Introduction
PORTAL
Agency Whitelabelling
PAGES
Pages - Accessing Page Data
Pagination Layouts
Page Templates
FORMS
Form Confirmation Pages
Adding a Progress Bar
Adding Custom CSS To Show Form Submit Process
Dynamic Content in Workflow and Autoresponder Emails
How to output Custom Field Set fields in a Form's Custom Layout
Custom JavaScript Validation for Forms
File Upload Previews
FAQ
CATEGORIES
Filtering WebApps and Modules by Categories
Outputting Categories on WebApp / Module / eCommerce Layouts
Outputting Category Fields in any Location
Category Detail Layouts
FAQ
COMPANY INFORMATION
Company Information
SITE SEARCH
Site Search
PUBLIC API/ZAPIER
Zapier - Formatting arrays correctly
Public API/Zapier Changelog
MODULES
Module Marketplace
Building Custom Modules
Siteglide Modules
Front-end Submit Modules
DATA STRUCTURES
Automations
Creating WebApps from the CLI
Field Types
WEBAPPS
Front-end Submit WebApps
Layouts
Search and Filtering
Understanding Custom Field Names and IDs
FAQ
CRM
User Details
User Secure Zones
Storing User's Favourite WebApp / Module Items
User's Form Submissions (Cases)
How Users Edit their Email and Password Front End
Editing a User's CRM record Front End with Custom Field Sets
CLI
Introducing Siteglide CLI
CLI Changelog
Secure Zones with CLI
Page Templates with Siteglide CLI
Pages with Siteglide CLI
Includes with Siteglide CLI
Managing Email Templates
Migrate - Manual Form setup
Migrate - Convert existing Forms
Liquid
Accessing Assets
Liquid Dot Notation
Using WebApp Collections- Tutorial
Using the current_user object with Secure Zones
Preventing Duplicate Content with Query Parameters- Canonical URL and Robots.txt
FAQ
GraphQL
Tutorial Overview
About GraphQL
Tutorial 1- Your First Query
Tutorial 2 - Pagination
Tutorial 3 - Filtering the Results
Tutorial 3 - Answers to the First Filtering Challenge
Tutorial 4 - Advanced Filtering
Tutorial 4 - Challenge Answers
Tutorial 5 - Using Liquid to run GraphQL queries on your Site
Tutorial 6 - Variables
Tutorial 6 - Answers to the Variables Challenge
Tutorial 7 - Sorting
Tutorial 8 - Building a Liquid API GET Endpoint Page powered by GraphQL queries
Best Practice and Performance
Module/WebApp Caching
Getting Started with Liquid Caching - to Reduce Server Response time and Improve Performance
Includes
ecommerce/checkout_standard
Frequently Asked Questions
Using Liquid Logic to Check if a field exists, or is empty on the Front End
How do I learn more about Liquid?
How to setup a multi domain start page
Docs powered by archbee 
20min

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.

HTML
|

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.

CSS
|
Document image

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.

JS
|

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:

HTML
|

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.

HTML
|

Step 4) Add JavaScript The first part of the function:

  1. Formats the main error message
  2. Selects the Form elements it needs
  3. 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.

JS
|

Related Articles

  • Forms
  • reCAPTCHA
Updated 19 Oct 2021
Did this page help you?
Yes
No
UP NEXT
File Upload Previews
Docs powered by archbee 
TABLE OF CONTENTS
Introduction
Marking a Field as Required
Default
Passing your Custom Function in as an Argument
Formatting your error message
Example Function
Custom Error Messages for Fields
Related Articles