How to only change to step 2 if there are no validation errors in the step 1?

I'm trying to create a multi-step form using jQuery AJAX and I want to validate each step with an ajax post request.

In the step 1 form, when the "go to step 2" button is clicked if there is a validation error in the console network tab it appears:

{success: false, errors: {buyer_name: ["The buyer name must be greater than 1 character."]}}

errors:{buyer_name: ["The buyer name must be greater than 1 characters."]}

success:false

This is ok. But even this error appears the user goes to the "step 2" tab. Then, in the next step 2 form if the user clicks in "go back to step 1" the validation errors appear in the "#step1Errors" div.

But do you know what is necessary to only change to the "step 2" tab, and only allow the user to change to the "step 2" tab if there are no validation errors in the ajax post request after click in "go to step 2" in the "step 1" tab?

I have the navigation between steps in the fiddle: https://jsfiddle.net/3adebaL3/10/. Ajax:

  
   $('#goToStep2').on('click', function (event) {
    event.preventDefault();
   

   

    var custom_form = $("#" + page_form_id);
   

    $.ajax({
    method: "POST",
    url: '/product/storeUserInfo',
    data: custom_form.serialize(),
    datatype: 'json',
   

    success: function (data, textStatus, jqXHR) {
    setTimeout(function () {
   

    }, 3000);
    },
    error: function (data) {
    console.log(data);
    var errors = data.responseJSON;
    var errorsHtml = '';
    $.each(errors['errors'], function (index, value) {
    errorsHtml += 
    '<ul class="alert alert-danger mt-3">
    <li class=text-danger">' + value + '</li>
    </ul>';
    });
   

    $('#step1Errors').show().html(errorsHtml);
    }
    });
   

    });
   });

Topic Participants
johnklzwk
jakecigar

How to only change to step 2 if there are no validation errors in the step 1?

How to only change to step 2 if there are no validation errors in the step 1?

Topic Participants

johnklzwk

jakecigar