Form live validation for JS changed value

Hi, I am struggling with an issue. I have a form with Nittro and live validation. When I enter a required field, clear the value, focus out, I get an error "This field is required". This is fine.

Now the problem, in some case I am trying to fill the value with JS

document.getElementById('frm-fieldForm-form-company_name').value = 'x';

But this does not remove the validation and I am not able to submit the form. After first submit try, the value is accepted, so when I submit it for a second time, it works. Is there a way to solve this? Like after I add the value by JS, somehow trigger validation change?

thanks

Hi, yes, it's pretty easy actually - you just need to trigger the blur event for the element and Nittro live validation will kick in. You can do this using DOM.trigger(element, 'blur'). The reason is that setting an input's value using javascript won't trigger any events, so there's no way for the Nittro live validation to know it should update (well, perhaps it could be done using mutation observers, but that's just plain overkill imo..).

Okay,... how do I get DOM? Application starts with

window._stack.push((di) => {
   di.getService('snippetManager')
      .on('after-update', evt => {
         if (typeof evt.data.update !== 'undefined') {
           init(di, Object.keys(evt.data.update));
      }
    });
});

And the copy function is inside init function fired on submit. So I do not have DOM available. I only have di and snippet,... maybe I need to modify this in nittro build?

Thank you

hi, sorry about failing to reply for so long, slipped right out of my mind.. you need to have it injected in your _stack.push() call like this:

_stack.push([(di, DOM) => {
  // ...
}, { DOM: 'Utils.DOM' }]);

Notice that the arguments to _stack.push() are wrapped in an array as opposed to directly passing the callback the way you did (which would be totally fine if you didn't need to pass in the import map).