We support some basic validation out of the box. Default is that if your form is submitted without any data at all - then we won't save it and will show an error message to the user instead:

If the form contains an email field, and that doesn't match an email address (simple check if there's a @ in the email) then we show the following message to the user:

More advanced validations

You can built upon or AJAX tutorial to add form validation by checking each field and run them against some rules you define, that could be "required", minimum-length, match a given format etc.

But for simplicity's sake I'll just focus on using HTML5 for this validation tutorial (see https://html.spec.whatwg.org/multipage/forms.html#client-side-form-validation).

Let's take a form that takes a name  and an email  - both of those fields are required and the email field of course requires that we input a string that matches an email.

We can use HTML5 very very easily for this.

<form action="https://www.formbackend.com/f/acd123" method="post" id="form-signup">
  <input type="text" name="name" required>

  <input type="email" name="email" required>

  <button type="submit">Submit</button>

If we look at the name  field, notice how it has required  at the end, just before the closing angle bracket: <input type="text" name="name" required>  that tells the browser that it shouldn't let the user submit the form without any data in that field.

For the email  field it's pretty similar, here we have required  as well - but we've also changed the type of the field to type="email" this way the browser will validate that it is a string that matches the email format before it let's the user submit the field.

So if you're using Chrome (as an example, all modern browsers support this), it would look something like this if your email isn't valid:

Other validation attributes

You can also use things like minlength="5" , maxlength="10" to specify the valid length of the input.

Did this answer your question?