I have a form that is using Abide. The form has two buttons, both are type="submit" but one has the formnovalidate attribute set. This button is for "previous step" as it takes whatever the user has filled in and submits the form, taking the user to the previous step of the form.
The issue is that abide validation still kicks in when the user clicks cancel preventing the user to go back, until he has filled in all the fields on the current step. HTML5 validation has formnovalidate attribute exactly for this use case. Is there a way to "ignore/skip" the abide validation when the cancel button is clicked?
Issue link on github: https://github.com/zurb/foundation-sites/issues/11426#issuecomment-441956255
Resolved in the github issue. Currently there is no native support for this by Foundation. A workaround is to rewrite the submit handler in Foundation JS. I did it like this:
.on( "submit.zf.abide", function( e ){
var $btn = $(document.activeElement);
if (
/* there is an activeElement at all */
$btn.length &&
/* it's a child of the form */
t.$element.has($btn) &&
/* it's really a submit element */
$btn.is('[type="submit"]') &&
/* it has a "formnovalidate" attribute */
$btn.is('[formnovalidate]')
) {
return true;
}else{
return t.validateForm()
}
})