Validation in WebApp configuration

As of Sitevision 2022.09.1 it will be easier to display error messages in the app configuration panel.

In Sitevision 2022.09.1 there are new features for app developers to improve display of validation errors. Also as a new default, required fields will be visually indicated as errors. For detailed information on usage, refer to the the documentation.

In this article:

Required field labels

If a field needs to be filled in, the clearest way to ensure there is no confusion is to spell out the word "required" or "obligatoriskt" in swedish. Some developer might want to use an asterisk instead, but we suggest spelling out the word for accessibility.

Pair the label and the form field to indicate which field is required using the attribute for="[field ID]".

From Sitevision 2022.09.1 the class sv-validation-required-label will be available for styling the required indicator.

<div class="form-group">
  <label for="text">
    Text <span class="sv-validation-required-label">(required)</span>
  </label>
  <input type="text"
         id="text"
         name="text"
         class="form-control"
         autocomplete="off"
         required>
</div>

Validation of required fields

Required fields are by default validated when the user clicks the OK button to save and close the app settings. Previously the app would disallow saving, but there would be no indication visible to the user. App developers had to adress that in a custom script in the app.

Starting in Sitevision 2022.09.1 the default will be to show a red border on the input field and a text describing the error.

Custom error messages

Developers will have access to methods for setting custom validation errors in the configuration. Below is a simple overview of what's available. See documentation for details.

<!-- HTML Attributes -->

<!-- Data Attributes -->
<div class="custom-component" data-sv-validation-component>
  <div class="custom-component-element">
    <input class="custom-component-input" data-sv-validation-error-msg="Custom error message">
  </div>
</div>

<!-- JavaScript Methods -->

<script>

  // Add Error Message Method
  window.sv.addErrorMessage(HTMLElement, { component, message, position, isValid });

  // Remove Error Message Method
  window.sv.removeErrorMessage(HTMLElement);

</script>

Do you want to subscribe to News from Sitevision Developer team? Subscribe here!