Ad

Accordion Form: Check Required Fields Before Enabling Next Step

- 1 answer

I have an accordion-style form. Each step is in its own accordion.

https://mci.bitpix.co.uk/builder

I want to check all fields are filled in before the next button is available.

Can anyone point me in the right direction for the first step and then ill replicate for the remaining steps.

Thanks in advance

Ad

Answer

Your link is giving me an error so I am limited in the code I can give you, but you could handle this in a couple of different ways.

From your question I am assuming the button is disabled, so you could use jquery to validate the fields onchange() and remove the disabled tag from the button once everything is filled out.

I would consider using the AJAX API to add a handler to validate the fields and pushing a partial update if it's successful to begin the next step. Rough code that you could use as a starting point for your component or php section of a page

function onSubmitFirstAccordion()
{
    $validator = Validator::make(
    [
        'name' => 'Joe',
        'password' => 'lamepassword',
        'email' => '[email protected]'
    ],
    [
        'name' => 'required',
        'password' => 'required|min:8',
        'email' => 'required|email|unique:users'
    ]
    );
   if ($validator->fails()) {
       throw new AjaxException([
         $validator->messages()
       ]);
   } else {
      return [
        '#myDiv' => $this->renderPartial('mypartial')
      ];
   }
}

And the code for the button would include:

<!-- Attributes API -->
<button data-request="onSubmitFirstAccordion" data-request-validate>Next Step</button>
Ad
source: stackoverflow.com
Ad