Terra Forms

Validation types

Below are the different types of validations you can implement using the form validation code. Validations are essential to ensure that the data entered by users is correct and follows the expected format, especially when integrating this information with third-party systems. Let’s explore:

• Basic Validation: Shows a generic error message if any required field is not completed.
• Advanced Validation: Displays specific error messages for each field, providing better feedback to users.
• Custom Class Validation: Validates specific fields based on custom classes, with personalized error messages.
• Custom Class with Custom Validation: Extends the custom class validation by adding specific rules for fields like emails, passwords, etc.
• Vue example: Coming up!

1. Basic Validation

Displays a general error message if any required field is missing. No specific field validation occurs except for the defualt types like EMAIL.

new Form({
  formWrapper: ".js--footer-form",
  group: ".js--form-group01",
  groupErrorClass: ".js--form-group01-error",
  submit: {
    element: ".js--form-submit01",
    errorElement: ".js--form-submit01-error",
    messageError: "Some fields are required"
  },
  onSubmit: (formData) => {
    console.log(formData);
  },
  onComplete: () => {
    console.log("Submited!")
  }
});

<form class="js--footer-form" id="testid1" data-portal-id="testid2">
  <div class="js--form-group01">
    <label for="firstname">First name:</label>
    <div class="">
      <input class="" type="text" id="firstname" name="firstname" required>
    </div>
    <p class="js--form-group01-error"></p>
  </div>

  <div class="js--form-group01">
    <label for="email">Email:</label>
    <div class="">
      <input class="" type="email" id="email" name="email" required>
    </div>
    <p class="js--form-group01-error"></p>
  </div>

  <button class="js--form-submit01">Enviar</button>
  <span class="js--form-submit01-error"></span>
</form>

Here you have an example.

2. Advanced Validation (Error for Each Field)

Each input field has its own error message.

new Form({
  formWrapper: ".js--footer-form",
  group: ".js--form-group01",
  groupErrorClass: ".js--form-group01-error",
  submit: {
    element: ".js--form-submit01",
    errorElement: ".js--form-submit01-error",
    messageError: "Please correct the errors above."
  },
  global: {
    fields: {
      default: "Please correct all errors",
      required: "This field is required",
      email: "Please enter a valid email address",
    }
  },
  onSubmit: (formData) => {
    console.log(formData);
  },
  onComplete: () => {
    console.log("Submited!")
  }
});

<form class="js--footer-form" id="testid1" data-portal-id="testid2">
  <div class="js--form-group01">
    <label for="firstname">First name:</label>
    <div class="">
      <input class="" type="text" id="firstname" name="firstname" required>
    </div>
    <p class="js--form-group01-error"></p>
  </div>

  <div class="js--form-group01">
    <label for="email">Email:</label>
    <div class="">
      <input class="" type="email" id="email" name="email" required>
    </div>
    <p class="js--form-group01-error"></p>
  </div>

  <button class="js--form-submit01">Enviar</button>
  <span class="js--form-submit01-error"></span>
</form>

Here you have an example.

3. Custom Class Validation

Here, validation is based on a custom class (e.g., MYCLASS). Input fields with this class will display a specific error message when required but not filled.

new Form({
  formWrapper: ".js--footer-form",
  group: ".js--form-group01",
  groupErrorClass: ".js--form-group01-error",
  submit: {
    element: ".js--form-submit01",
    errorElement: ".js--form-submit01-error",
    messageError: "Please correct the errors above."
  },
  global: {
    fields: {
      default: 'Please complete all required fields.',
      required: 'This field is required',
      email: 'Please enter a valid email address',
    }
  },
  fields: [{
    element: document.querySelector(".MYCLASS"),
    messageError: 'This is MYCLASS required error',
  }],
  onSubmit: (formData) => {
    console.log(formData);
  },
  onComplete: () => {
    console.log("Submited!")
  }
});

<form class="js--footer-form" id="testid1" data-portal-id="testid2">
  <div class="js--form-group01">
    <label for="firstname">First name:</label>
    <div class="">
      <input class="" type="text" id="firstname" name="firstname" required>
    </div>
    <p class="js--form-group01-error"></p>
  </div>

  <div class="js--form-group01">
    <label for="email">Email:</label>
    <div class="">
      <input class="" type="email" id="email" name="email" required>
    </div>
    <p class="js--form-group01-error"></p>
  </div>

  <div class="js--form-group01">
    <label for="password">Password:</label>
    <div class="">
      <input class="MYCLASS" type="password" required>
     </div>
     <p class="js--form-group01-error"></p>
    </div>

  <button class="js--form-submit01">Enviar</button>
  <span class="js--form-submit01-error"></span>
</form>

Here you have an example.

4. Custom Class with Custom Validation

This option extends the previous example by adding custom validation rules. Inputs with the MYCLASS class will show error messages if the validation rules are not met. Each input can have specific error messages, defined via custom rules (e.g., email validation).

new Form({
  formWrapper: ".js--footer-form",
  group: ".js--form-group01",
  groupErrorClass: ".js--form-group01-error",
  submit: {
    element: ".js--form-submit01",
    errorElement: ".js--form-submit01-error",
    messageError: "Please correct the errors above."
  },
  global: {
    element: '.js--form-global01',
    errorElement: '.js--form-global01-error',
    fields: {
      default: 'Please complete all required fields.',
      required: 'This field is required',
      email: 'Please enter a valid email address',
    }
  },
  fields: [
    ...Array.from(document.querySelectorAll(".ILoveTerra")).map(element => ({
      element: element,
      messageError: 'This is ILoveTerra required error',
      rule: {
        validation: /ILoveTerra/,
        messageError: "This must contain the string 'ILoveTerra'!!"
      },
    })),
    {
      element: document.querySelector("#email"),
      messageError: 'This is email required error',
      rule: {
        validation: /^[a-zA-Z0-9._%+-]+@terrahq\.com$/,
        messageError: "This email is not from Terra!"
      },
    }
  ],
  onSubmit: (formData) => {
    console.log(formData);
  },
  onComplete: () => {
    console.log("Submited!")
  }
});

<form class="js--footer-form" id="testid1" data-portal-id="testid2">
  <div class="js--form-group01">
    <label for="firstname">Company name:</label>
    <div class="">
      <input class="ILoveTerra" type="text" name="firstname" required>
    </div>
    <p class="js--form-group01-error"></p>
  </div>

  <div class="js--form-group01">
    <label for="email">Email:</label>
    <div class="">
      <input type="email" id="email" name="email" required>
    </div>
    <p class="js--form-group01-error"></p>
  </div>

  <div class="js--form-group01">
    <label for="password">Password:</label>
    <div class="">
      <input class="ILoveTerra" type="password" name="password" required>
     </div>
     <p class="js--form-group01-error"></p>
  </div>

  <button class="js--form-submit01">Enviar</button>
  <span class="js--form-submit01-error"></span>

  <div class="js--form-global01 ">
    GLOBAL DIV
    <p class="js--form-global01-error"></p>
  </div>
</form>

Here you have an example.

5. Example with error

This option introduces error handling. It reports errors such as missing required fields, invalid form data, or undefined fields in the configuration. With the onError callback.

new Form({
    formWrapper: ".js--footer-form",
    group: ".js--form-group01",
    groupErrorClass: ".js--form-group01-error",
    submit: {
        element: ".js--form-submit01",
        errorElement: ".js--form-submit01-error",
        messageError: "Some fields are required"
    },
    onSubmit: (formData) => {
        console.log(formData);
    },
    onComplete: () => {
        console.log("Submited!")
    },
    onError: (error) => {
      alert(error)
      console.error(error)
    },
});

<form class="js--footer-form">
  <div class="js--form-group01">
    <label for="firstname">First name:</label>
    <div class="">
      <input class="" type="text" id="firstname" name="firstname" required>
    </div>
    <p class="js--form-group01-error"></p>
  </div>

  <div class="js--form-group01">
    <label for="email">Email:</label>
    <div class="">
      <input class="" type="email" id="email" name="email" required>
    </div>
    <p class="js--form-group01-error"></p>
  </div>

  <button class="js--form-submit01">Enviar</button>
  <span class="js--form-submit01-error"></span>
</form>

Here you have an example.