Introduction

Validation occurs when a user clicks submit on a form.

Fields must be marked as "required" by the Admin, or in the HTML of your Form, in order for them to trigger the validation process. For most fields, we will validate whether or not a field has been submitted- but for emails we take the extra step of checking whether or not the format of the email is valid.

You can either use Siteglide's default validation message, or write your own custom JavaScript.

We'll also provide examples of how you can customise the error messages each provide to your users.

Default

You can use the following line of HTML in your form Form Layout file to output the default JS validation error message:

<div class="form-error"></div>

A class of .form-error gets added to fields if they fail to validate, which you can write custom CSS to sale as you wish.

Passing your Custom Function in as an Argument

You can write your own custom validation by changing: 

<button onClick="s_form_submit_v2(this,'form_12');">


 to be:
 

<button onClick="s_form_submit_v2(this,'form_12',error);">

where error  is the name of your function. e.g.

<button onClick="s_form_submit_v2(this,'form_12',error);">

<script>
  function error() {
    alert('Hello World')
  }
</script>

Example Functions


A General Error Message

Here’s an example of custom JS to write your own general error message:

<div id="customErrors"></div>
<script type="text/javascript">
function error(err) {
document.querySelector(‘#customErrors’).style.display = ‘block’
document.querySelector(‘#customErrors’).innerHTML = ‘My custom error message’;’
}
</script>


Custom Error Messages for Fields

You could customize your error message on an input by input basis, as in the example below:

<input class="form-control required" name="{{ form_builder.fields.properties.name.name }}" id="s_name" type="text" autocomplete="name">
<!-- Email address contains a custom error message in a data attribute. -->
<input data-custom-msg="Please enter a valid email address." class="form-control required" name="{{ form_builder.fields.properties.email.name }}" id="s_email" type="email" autocomplete="email">

<input class="form-control required" id="{{ form_builder.fields.properties.form_field_4_1.name }}" name="{{ form_builder.fields.properties.form_field_4_1.name }}" type="text" autocomplete="off">

<script>
  function error() {
    var standard_errors = document.querySelectorAll(".input-error:not([data-custom-msg])");
    var custom_errors = document.querySelectorAll(".input-error[data-custom-msg]");
    var old_errors = document.querySelectorAll(".my-input-error");
    var standard_error_message = "<div class=\"my-input-error alert alert-warning\">This field is required.</div>";
    //Delete old error messages
    for (e=0;e<old_errors.length;e++) {
      old_errors[e].parentNode.removeChild(old_errors[e]);
    }
    //Add standard error messages
    for (e=0;e<standard_errors.length;e++) {
      var this_error = standard_errors[e];
      this_error.insertAdjacentHTML("afterend", standard_error_message);
    }
    //Add custom error messages
    for (e=0;e<custom_errors.length;e++) {
      var this_error = custom_errors[e];
      var custom_message = "<div class=\"my-input-error alert alert-warning\">"+this_error.getAttribute("data-custom-msg")+"</div>";
      this_error.insertAdjacentHTML("afterend", custom_message);
    }
  }
</script>

Related Articles

Did this answer your question?