How to force error status in required input if empty when submitting a form?

Ask the community
,
1

Hello.
I’m checking the validity of all input elements when the submit button is being clicked, and all is working fine but I would like to force error status of required inputs if they are empty, so the user knows what they left empty.

Thanks!

2

Hi Dani,

A great way to learn the available features of a wix element will be to use" $w(“#myElement”). "

After you type the the dot , Wix editor will suggest all the available features along with a short description and link to the API reference.

Go through that list of your desired input element and you will find the answer for your question.

After that If you are stuck post your code and I will help you to complete it.

Regards,
Nithin

3

Hello @thrishtilabs ! Thanks for answering. I have actually read the API Reference in fact, the problem is that I don’t know what to use to do what I want.

I would like to copy the behaviour of Wix Forms, more specifically, the one I show down below, which turns the inputs in error mode if they are required and empty when clicking submit:

I have tried several things, but none worked.

Any ideas?
Thanks!!
PS: Maybe @ahmadnasriya has any idea too.

4

1.What have you tried?
2.And what have you read specifically in the API reference ?
3.Did you tried my trick to find quick documentation about an elements supported features?
4. If yes what did you found there that can be used to solve your issue?

Btw here is the documentation of the code that you want to use to solve your problem. Read it and try implementing it. If it’s not working search in this forum with “updatevalidity”. You will find lot of examples how to do it. Even then if you have problem , post your code here and I will help you to complete it.

5

Hello again, thanks for the quick response! I just hadn’t tried the updateValidityIndication function, and it’s just what I needed, thank you!

By the way, for those who have many inputs and want to do something to all of them at the same time, they can make an array with the input id’s, and then use a for…in loop with text templates. An example would be:

const array = [input1, input2];

for(let el in array){
$w(`#${array[el]}`).whatever()
...
}
6

Hello Dani,

what about this one?

$w.onReady(function () {})

export function button1_mouseIn(event) {console.log($w('#input1').value)
 if ($w('#input1').value==="") {$w('#input1').style.backgroundColor="rgb(255,155,155)"}
 if ($w('#input2').value==="") {$w('#input2').style.backgroundColor="rgb(255,155,155)"}
 if ($w('#input3').value==="") {$w('#input3').style.backgroundColor="rgb(255,155,155)"}
}

export function button1_mouseOut(event) { console.log($w('#input1').value)
  $w('#input1').style.backgroundColor="rgb(255,255,255)"
  $w('#input2').style.backgroundColor="rgb(255,255,255)"
  $w('#input3').style.backgroundColor="rgb(255,255,255)"
}

In combination with this one…
https://russian-dima.wixsite.com/meinewebsite/enable-button-check

And here you have a simple example…
https://russian-dima.wixsite.com/meinewebsite/blank-22

797×503 3.97 KB

Of course you can modify and expand the functions.