Trigger input validation via code

Ask the community
,
1

I’m looking into a problem but I don’t think there is a solution. Maybe someone has a better idea

lets say we have a form with 2 inputs. Form is valid once 2 input value are equals. So I build a custom validator

input.value && input.value === inputOther.value

And set the custom validator for input1 and input2.

My question is: is there a way to trigger validation for a given element?

Having the following scenario:

  1. input1 is set to “a” & input2 is empty: input1 is not valid. <= ok

  2. input2 is set to “b”: input1 is not valid & input2 is not valid. <= ok

  3. input1 is et to “b”: input1 is valid but input2 is still not valid because validation has not run. <= not ok
    Another one:

  4. input1 and input2 are set to “b”: both are valid. <=ok

  5. input1 is changed to “a”: input1 is not valid but input2 is still valid <= not OK

Ideally, I would trigger validation on both inputs once one of the 2 changes.

This is a simplified problem. My current is issue is for an event form where startDate < endDate.

What would be your recommended solution?

I personally would like the possibility to do something like:

$w("input1").triggerValidation() // runs all validators on input1 and update // valid status and messages

DEMO

2

I’m not sure I fully understand the requirements. But whet about:

$w("#input1, #input2").onChange(event => {
    $w("#input1").valid && $w("#input1").value === $w("#input2").value ? runOnValidation() : showMsg();
})
function runOnValidation(){
    //some code
})
function showMsg(){
    //show "please fill in the fields" message
})

Is that what you meant?

3

So my requirement is to work within Wix validation system. I don’t want to rebuild a validation system next to the one of wix (with all feature, like .valid .validity and validationMessage)

for instance, you will not be able to validate your form that way

let isformValid = inputSelectors.every(selector => selector.valid)

We can always find a workaround but for something as basic as input validation, I wish we wouldn’t have to come up a workaround

Does anyone have another solution? :slight_smile:

4

Managed to build this experience using both onChange and onCustomValidation

and here is the code

$w.onReady(() => {
  $w('#input1').onChange(changeInput1)
  $w('#input2').onCustomValidation(validateInputs);
});

function changeInput1() {
  // force input2 to update the validity state  
  $w('#input2').value = $w('#input2').value;
}

function validateInputs(value, reject) {
  let val1 = $w('#input1').value;
  let val2 = $w('#input2').value;
  if (val1 !== val2) {
    reject('Both inputs should have the same value');
  }
}

export function button2_click(event) {
  console.log('input1:', $w('#input1').validationMessage, 'input2:', $w('#input2').validationMessage)
}
5

It works like a charm. Thx

6

Is possible code that a min. lenght requird for input with this code above?