How to Add Custom Validations to Fields and Forms

In Convert Forms, you can create custom field validation rules that can be implemented on both the client and server sides to ensure data integrity and security.

Client-Side Validation

Client-side validation employs JavaScript to validate user input directly within the browser before the data is submitted to the server. This allows for immediate feedback to users, enhancing user experience. To implement client-side validation, you need to listen for the form's beforeSubmit event and validate the fields accordingly, as illustrated in the example below:

ConvertForms.Helper.onReady(() => {
	form.addEventListener('beforeSubmit', (event) => {
		if (inputConditionHere) {
			event.preventDefault();
			event.detail.error = 'Your custom message here';
		}
	});
});

Let's see some examples:

Validate Input Maximum Characters

This example demonstrates an error message that appears when the input exceeds the specified character limit.

var formID = 160;
var inputName = 'email';
var maxChars = 10;
var error = 'Maximum character limit reached.';

ConvertForms.Helper.onReady(() => {
	var form = document.querySelector('#cf_' + formID);
	form.addEventListener('beforeSubmit', (event) => {
		var input = form.querySelector('input[name="cf[' + inputName + ']"]');

		if (input.value.length > maxChars) {
			event.preventDefault();
			event.detail.error = error;
		}
	});
});

Server-Side Validation

Server-side validation, on the other hand, is implemented using PHP. This validation occurs on the server after the form data is submitted. Server-side validation is crucial for security and data integrity, as it ensures that even if client-side validation fails or is bypassed, the server still enforces validation rules.

To implement server-side validation with PHP, you must place the PHP snippet into the PHP Scripts -> Form Prepare option. Use the $post (Array) variable to access the submission data. To display a custom error message, throw an exception like in the example below:

if (someConditionHere == 'VALUE')
{
   throw new Exception('Your custom error message here');
}

Let's see some examples:

Validate Input Maximum Characters

This example demonstrates an error message when input exceeds the specified character limit but takes place on the server side.

$maxChars = 50;
$inputName = 'message';
$error = 'Maximum character limit reached.';

if (strlen($post[$inputName]) > $maxChars)
{
   throw new Exception($error);
}

Ensure Your Form Accepts a Limited Number of Submissions

In this example, you can set your form to accept a specific number of submissions. An error message will prompt once this limit is reached, indicating that no further submissions can be accepted.

// Set the maximum submissions accepted
$max_submissions = 40;

// Specify the error message to reach maximum submissions.
$error = 'We do not accept further submissions.';

// Do not edit below
if (ConvertForms\Form::getSubmissionsTotal($form['id']) >= $max_submissions)
{
    throw new Exception($error);
}