So I have a question regarding custom forms and coding validations. I am trying to make it where when you hit the "next" button, you can only move to the next page IF you filled out all required input fields. I am having trouble finding the correct code to allow this process.
Essentially I have 11 required fields:
- First Name #firstname1
- Last Name #lastname1
- Gender #gender1
- Date of Birth #dob1
- Address #address1
- City #city1
- State #state1
- Zip #zip1
- County #county1
- Phone #phone1
- Email #email1
And a next button (#next1)
How can I make it so you can only advance to the next page after the required fields have been populated?
I have searched for 3 hours and can't find a solution.
Any help would be much appreciated.
Thanks
Josh
Make all the input "required" (you can do it when you click the element settings).
Add "Please fill-in all the fields" text message and make it hidden on load.
Then write something like:
$w.onReady(() => { const inputs = [$w('#firstName'), $w('#lastName'), $w('#gender')/* all, the elements*/]; $w('#nextButton').onClick(() => { if(inputs.every(e => e.valid)) { //change page code } else { $w('#completeTheFormMsg').show(); } }) })