[SOLVED] Validation working in preview but not live

Ask the community
,
1

I have multiple checkbox groups being checked for validity on change. All code was triple checked in preview and live and shows that it’s working. However, in preview, the checkboxes will turn red if both boxes are checked but in live, nothing happens except for a yellow border. How can I get the error coloring to indicate in live?

Here’s an example of the code used on the checkboxes with “yes/no”:

 let checkChecks = $w("#staffOnly").value.length;
   if(checkChecks > 1){
      console.log("staff false")
      $w('#staffOnly').validity.valid = false;
      $w('#staffOnly').updateValidityIndication();
   }else if(checkChecks === 1){
      console.log("staff true")
      $w('#staffOnly').validity.valid = true;
      $w('#staffOnly').resetValidityIndication();
   }

Live page: Spay & Neuter | Valley Falls, KS | Jefferson County Humane Society

2

Have you tried to use onCustomValidation ?

3

I have never used that and I guess I don’t understand how to use it even after looking at it. Would I put my IF statements in that instead?

4

Hi there,

The properties of the element’s validity are read-only, you cannot change them, there are no setter s - I presume - on these properties.

Instead, as J. D. said, the onCustomValidation is the way to go.

5

Thanks for your reply - can you give me an example that would show how to use it for the purposes I’m trying to do? I cannot seem to wrap my head around how to write this at all.

If I can’t use the validity (it’s worked on other checkbox groups) I’ve tried changing the style but that also always errors out

thanks for your help

6

@raraavismedia It’s very simple to implement once you read the API’s docs, it’s only 3 lines of code - I can even shorten it to only 1 line :grin:

$w("#staffOnly").onCustomValidation((value, reject) => {
    value.length > 1 ? reject('Only one staff allowed!') : null;
})
7

@ahmadnasriya I guess I was overthinking it. However, I’m still at the same crossroads. On the live site, no errors show when both boxes are checked (the checkboxes don’t turn red like they should - and like they do on preview). The red DOES show up when both boxes are not checked like it should.

8

@ahmadnasriya Sorry to bother but any ideas on the validation problem not triggering visually in live?

9

There’s a typo in your code. It should be:

 value.length > 1 ? reject('Only one staff allowed!') : null;

@raraavismedia , as Ahmad said, you can’t use the validity.valid to set the validty. So either use Ahmad’s code with the ternary operator (after you fix the typo). Or make it an explicit condition:

$w("#staffOnly").onCustomValidation((value, reject) => {
    if(value.length > 1) {reject('Only one staff allowed!');}
})
10

@jonatandor35 Thank you so very much, the explicit was exactly what I needed