Hook Forms' Built-In Validation

use to:
require fields

We are proud to offer front-end validation packaged right into Hook Forms. We're expanding this feature to allow complex validations in the future. For now, use built-in front-end validation to require fields.

Here's how easy it is to require a field:

Remove Current Custom Validation

If you already had a form in place running some sort of onSubmit= validation function, remove that first.

Add data attribute to required fields

Locate the input fields you'd like required, and add data-hf-required="true". Hook Forms will recognize this before submission, stop the process and add red "required" text just after the input.

Here's what it looks like:

<input type="text" data-hf-required="true" name="myInput"/>
Required Field Error

Soon this validation will allow you to set input types, formatting, character limits and more.

Using Your Own Front-End Validation

Only step: Set our variable

Your validation probably looks roughly like this (or a jQuery equivalent):

function validateForm() { 
var email = document.forms["contactform"]["email"].value;
if (email==null || email=="") {
triggerError("Please enter your email address.");
return false;
}
}

In here, simply set the global varialbe submit_hook_form to false before the return. Hook Forms will read this and stop any further action (if needed) in its submission process.

So, your code becomes:

function validateForm() { 
var email = document.forms["contactform"]["email"].value;
if (email==null || email=="") {
triggerError("Please enter your email address.");

submit_hook_form = false;

return false;
}
}
Note: Do not include 'var.' It would set a new local variable.

Place Your Validation Before Hook Forms JS

Your onSubmit= needs to run first. To ensure this, include your front-end validation (or the file containing it) before the Hook Forms JavaScript.

Examples:

 function validateForm() { 
...
}
<script src="https://hookforms.com/api/v1/form.js"></script>

or...

 <script src="/js/myCustomJS.js"></script>
<script src="https://hookforms.com/api/v1/form.js"></script>

With this technique you can implement the most complex of validations, and Hook Forms will not interfere. A Hook Form is built with your form, your process, and your decisions.