Conditional

Ask the community
, ,
1

Hi everybody!
I’m creating a form with wix forms and I can’t get put some validations, so, I’m looking for anothers ways and I have made strides…

The question: my form has two fields conected. I want the submit button to be disabled if one field or the other field is wrong. The submit button will be enable only if both fields are correct.

How can I do this code and where I put it?

2

You can check the two fields and if both are valid, then you would enable the submit button:
$w(“#submitButton”).enable();
If one or both of the fields are invalid, then you would disable the submit button:
$w(“#submitButton”).disable();

3

How can I create a code to validate two fields at same time? Because if the user wrong both fields and he corrects only one, my button will enable, he doesn’t need correct the other field to send a form. I don’t want that this happens.

4

You would need something like this:

let val1;
let val2;

export function input1_keyPress(event, $w) {
   setTimeout(() => {
      val1 = $w('#input1').value;
      checkValidity();
   }, 10); // 10 milliseconds works for me
}

export function input2_keyPress(event, $w) {
   setTimeout(() => {
      let val2 = $w('#input2').value;
      checkValidity();
   }, 10); // 10 milliseconds works for me
}

function checkValidity() {
   if (val1 is valid and val2 is valid) { // not real code
      $w("#submitButton").enable();
   }
   else {
      $w("#submitButton").disable();
   }
}

You will need to substitute real code for the if statement in the checkValidity() function which will check if each field is valid and will then enable/disable the submit button.

I hope this helps,

Yisrael

5

Thanks!
Unfortunately, my problem continues… Everthing I try, I can disable the button, but I’can’t enable it.
Here in Brazil, the phone number has 10 or 11 digits. CNPJ is a business code with 14 digits. So I created this code (without sucess) and I call the function in onBlur of fields.

function submit() {
var phone = $w(“#input7”).value;
var cnpj = $w(“#cnpjL”).value;

if ((phone.length === 10 || phone.length === 11) && cnpj === 14) {
$w(‘#button2’).enable();
}
if ((phone.length === 10 || phone.length === 11) && cnpj !== 14) {
$w(‘#button2’).disable();
}
if ((phone.length !== 10 || phone.length !== 11) && cnpj === 14) {
$w(‘#button2’).disable();
}
if ((phone.length !== 10 || phone.length !== 11) && cnpj !== 14) {
$w(‘#button2’).disable();
}
}

Why does not this work?

6

Perhaps you meant to use cnpj.length ? As it is, you are checking if the value of the field is equal or not equal to the number 14.

7

I didn’t realize that mistake. I corrected, but still the problem continued

8

First, let me mention that there is another mechanism to validate the input. See these articles for more details:

9

I saw these articles and I didn’t undestand very well "onCustomValidation() ". I’m not a programmer, I understand somethings. I think its would resolve my problem, but I don’t know how to use it in my case. I didn’t make the form with dataset and user input , I used the “wix forms”. When I create fields, I didn’t find a place to put a regular expression.

This is the page: https://www.lemonbr.com/copia-contato

I’m trying codes only in the first form (radio button Assistência Técnica >> Below box with instructions - radio button Lojista). I did a code to put mask in fields selected below.

931×764 12.9 KB

These fields are required, so, the problem is no when they are empty, but if the user put only 1 number instead 10 or 11 (phone) or 14 (cnpj). I’ve managed to get the button to be enabled according to the information of each field, but not checking both at once.

Other problem is both fields accepts letters, and I need only number. But, if I change input Type to
numbers, the code of mask doesnt work.

Now, if exist a way to do forms with dataset besides submit button saves datas it sends them to an email, maybe it will be easier.

10

How can I show the code for you? Can I paste here?

11

You need to perform your validation on the input fields in the onKeyPress() functions - not in the onChange() functions which are not triggered at the correct time. Make sure you use debounce when retrieving the input value. For more information on this, see the forum post Give the TextInput onKeyPress Function some time .

12

Interesting this alternative, but if a user is slow to type, it will appear the text that the number placed is wrong … I will test this code better. Thank you!