How to create a Validator Extension?

Wappler General How To
#1

Is it possible to create custom validator with extensions? Let’s say I want to validate document number with check digit in client side.

I’ve read other topics about creating custom extensions but couldn’t find examples of these type of extensions.

#2

Hi,
Creating client side formatter is easy in Wappler.
These don’t show up in the UI, but you can use them directly in code view.

Here’s an example: Please add specific language support for slugify formatter

#3

Oh my gosh… how I didn’t figured out by myself? Lol…

Thank you!

#4

Actually, turns out that I don’t need a formatter, but a javascript snippet that validates, show errors to user and prevents form from submitting.

In an “app.js”, loaded in the html layout, there is a factory function that return true or false for validation and sets error message with dmx.validate:

const validateCnpjFactory = (element) => {
  return () => {
    const isValid = validaCnpj(element.value);
    dmx.validate.setErrorMessage(element, isValid ? '' : "CNPJ inválido!");
    return isValid;
  }
}

In a script tag in my page:

  var inpCnpj = document.getElementById('inp_cnpj');
  var formUpdate = document.getElementById('sc_update_empresa');
  inpCnpj.addEventListener("blur", validateCnpjFactory(inpCnpj));
  formUpdate.addEventListener("submit", () => validateCnpjFactory(inpCnpj)());

Why my field is validated, but submit is not prevented?

There is a “Wappler way” to prevent form submitting?

#5

Okay, I managed to find an acceptable solution:

  var inpCnpj = document.getElementById('inp_cnpj');
  inpCnpj.addEventListener("blur", (ev) => {
    const isValid = validateCnpjFactory(inpCnpj)();
    dmx.app.set('custom_form_error', !isValid);
  });

Then I added a dmx-bind:disabled="custom_form_error" to submit button, disabling it.

If you know a better way of doing that, please let me know! :smiley:

#6

The solution looks good. :+1: