Login

Enhancing Form Security with data-validate in Docly

Explore the vital role of backend validation in web forms and how Docly's data-validate attribute seamlessly integrates this into your projects. This post delves into using data-validate for robust form security, focusing on its application in Google reCAPTCHA validation.

Understanding data-validate:

The data-validate attribute in Docly links form elements to specific backend validation functions, ensuring the form data meets the necessary criteria before submission. This attribute is crucial for maintaining form integrity and security.

Backend Validation with data-validate:

This attribute plays a key role in implementing backend validations like Google reCAPTCHA. By validating the reCAPTCHA response server-side, data-validate helps safeguard forms against spam and automated submissions.

Example: Google reCAPTCHA Validation:

> Example: Google reCAPTCHA Validation with an API function:

#/API/MyFunction.js 

// The form values come in the "form" object as they are posted to the server

let token = form["g-recaptcha-response"];
if (!token) docly.assert("Validation failed: token not specified!");
    
// Validates the token with Google reCAPTCHA.
// Refer: https://developers.google.com/recaptcha/docs/verify
// NOTE: This is a 3. party integration, it may be outdated at some point and require updates
var googleUrl = "https://www.google.com/recaptcha/api/siteverify?response=" + token + "&secret=<ENTER-YOUR-LEGACY-SITE-KEY-HERE>";
var result = docly.httpPost(googleUrl, {});
if (!result.success) docly.assert("Google validation failed!"); /* It didn't validate and code will exit here */


return true; // Return true to confirm the validation

> Form Implementation with data-validate:

See how to apply data-validate in a practical setting: 

<form data-validate="MyFunction">
    ...
    <!-- Google reCAPTCHA widget -->
    <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>
    ...
</form>

This example demonstrates assigning the data-validate attribute to a form, linking it to a custom validation function.

Let's conclude

The "data-validate" attribute is a powerful tool in the Docly platform, enhancing form security and reliability. Whether you're implementing Google reCAPTCHA or other backend validations, this attribute ensures that your forms are both secure and user-friendly.