Exploring JSON Schema for Form Validation in Web Components

In the realm of modern web development, ensuring data integrity and user experience is paramount. JSON Schema has emerged as a powerful tool for validating the structure of JSON data, providing developers with a standardized approach to data validation, documentation, and extensibility. When combined with Web Components, JSON Schema becomes an even more potent solution for form validation, offering a modular, reusable, and maintainable approach to UI development. This blog post will walk you through the process of integrating JSON Schema validation into a custom Web Component, using a contact form as our example. Understanding JSON Schema JSON Schema is a vocabulary that allows you to annotate and validate JSON documents. It serves three primary purposes: Data Validation: Ensure that JSON data conforms to a defined structure.

Documentation: Provide a clear, standardized way to describe the structure of JSON data.

Extensibility: Allow for the extension of validation rules to accommodate specific requirements. Common keywords used in JSON Schema include: type: Defines the data type (e.g., string, number). properties: Specifies the expected properties within the JSON object. required: Lists the properties that must be present. enum: Restricts a property to a fixed set of values. By leveraging these keywords, JSON Schema enhances data quality, improves developer productivity, and facilitates better communication between different parts of a software system. Web Components: An Overview Web Components are a suite of technologies that allow developers to create reusable custom elements with encapsulated functionality and styling. These components are ideal for building modular, maintainable UI elements that can be easily integrated into any web application. Creating a Contact Form Web Component Contact us Web component: Here is the Sample code representing contact us web component class ContactUsForm extends HTMLElement {

template = document.createElement("template");

constructor() { super(); this.attachShadow({ mode: 'open' }); this.template.innerHTML = ` Contact Us First Name:

Last Name:

Email:

`; this.render(); }

render() { this.shadowRoot.appendChild(this.template.content.cloneNode(true)); } }

customElements.define('contact-us-form', ContactUsForm); Defining the JSON Schema Below is a JSON Schema tailored for our contact form: { "$schema": "https://json-schema.org/draft/2020-12/schema", "$id": "https://spradeep.com/contact-us.schema.json", "title": "Contact us", "description": "Contact us", "type": "object", "properties": { "firstName": { "description": "First name of the user", "type": "string", "minLength": 3 }, "lastName": { "description": "Last name of the user", "type": "string" }, "email": { "description": "Email address of the user", "type": "string", "pattern": "^\\S+@\\S+\\.\\S+$", "minLength": 6, "maxLength": 127 } }, "required": [ "firstName", "email" ] } Validation of the contact form fields are represented using the keywords required and pattern Required Validation: "required": [ "firstName", "email" ] Email input Validation. "type": "string", "pattern": "^\\S+@\\S+\\.\\S+$", Integrating JSON Schema Validation To incorporate validation, we’ll utilize Ajv, a widely used JSON Schema validator: Ajv generates code to turn JSON Schemas into super-fast validation functions that are efficient for v8 optimization. Include Ajv in your project: Initialize Ajv and compile the schema: //Initialize AJV var Ajv = window.ajv2020; var ajv = new Ajv({ allErrors: true, verbose: true, strict: false });

//Pass contactUs JSON schema to AJV

template = document.createElement("template");

constructor() { super(); this.attachShadow({ mode: 'open' }); this.template.innerHTML = ` Contact Us First Name:

Last Name:

Email:

`; this.render(); }

render() { this.shadowRoot.appendChild(this.template.content.cloneNode(true)); } }

customElements.define('contact-us-form', ContactUsForm); class ContactUsForm extends HTMLElement {

template = document.createElement("template");

constructor() { super(); this.attachShadow({ mode: 'open' }); this.template.innerHTML = ` Contact Us First Name:

Last Name:

Email:

`; this.render(); }

render() { this.shadowRoot.appendChild(this.template.content.cloneNode(true)); } }

customElements.define('contact-us-form', ContactUsForm); Defining the JSON Schema Defining the JSON Schema Below is a JSON Schema tailored for our contact form: { "$schema": "https://json-schema.org/draft/2020-12/schema", "$id": "https://spradeep.com/contact-us.schema.json", "title": "Contact us", "description": "Contact us", "type": "object", "properties": { "firstName": { "description": "First name of the user", "type": "string", "minLength": 3 }, "lastName": { "description": "Last name of the user", "type": "string" }, "email": { "description": "Email address of the user", "type": "string", "pattern": "^\\S+@\\S+\\.\\S+$", "minLength": 6, "maxLength": 127 } }, "required": [ "firstName", "email" ] } { "$schema": "https://json-schema.org/draft/2020-12/schema", "$id": "https://spradeep.com/contact-us.schema.json", "title": "Contact us", "description": "Contact us", "type": "object", "properties": { "firstName": { "description": "First name of the user", "type": "string", "minLength": 3 }, "lastName": { "description": "Last name of the user", "type": "string" }, "email": { "description": "Email address of the user", "type": "string", "pattern": "^\\S+@\\S+\\.\\S+$", "minLength": 6, "maxLength": 127 } }, "required": [ "firstName", "email" ] } Validation of the contact form fields are represented using the keywords required and pattern Required Validation: "required": [ "firstName", "email" ] "required": [ "firstName", "email" ] Email input Validation. "type": "string", "pattern": "^\\S+@\\S+\\.\\S+$", "type": "string", "pattern": "^\\S+@\\S+\\.\\S+$", Integrating JSON Schema Validation Integrating JSON Schema Validation To incorporate validation, we’ll utilize Ajv, a widely used JSON Schema validator: Ajv generates code to turn JSON Schemas into super-fast validation functions that are efficient for v8 optimization. Include Ajv in your project: Include Ajv in your project: Include Ajv in your project: Include Ajv in your project: Initialize Ajv and compile the schema: Initialize Ajv and compile the schema: Initialize Ajv and compile the schema: //Initialize AJV var Ajv = window.ajv2020; var ajv = new Ajv({ allErrors: true, verbose: true, strict: false });