No form validation on previous button

Question

I have a multiple pages form where people can press next and previous . The form validates when trying to click next but it also validates when they click previous , which shouldn't be the case.

I've searched on Google and used some solutions provided by different websites such as class="cancel" or formnovalidate="formnovalidate" but nothing has worked for me so far.

These are my two buttons who are both in a form

<button data-role="prevbutton" class="btn btn-secondary pull-left">Previous</button>
<button data-role="nextbutton" class="btn btn-primary">Next</button>

There is no simple JS code that calls a function but more like this:

flow.isBelgianResidentChangeHandler = function(isBelgianResident) { 
if (isBelgianResident) { 
$('[data-role="nextbutton"]').attr('disabled', false); 
} else { 
$('[data-role="nextbutton"]').attr('disabled', true); 
} };

Answer 1

It's hard to know without seeing your JavaScript code, but it could be because the default behavior of button elements in a form are to be submit buttons. So, whichever button you pressed, it would still submit your form. If this is the problem, then adding type="button" to your previous button will fix it.

<button data-role="prevbutton" type="button" class="btn btn-secondary pull-left">Previous</button>