Custom Forms and Validations

Ask the community
, ,
1

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

2

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();
 }
})
})