I recently started using the JavaScript library for client-side form validation called Bouncer. It has been working really well, but I have encountered a peculiar behavior that I need help understanding.
My form has two submit buttons with different values. When I don't validate the form using the library, I can retrieve the exact button value on the server-side. However, when I implement the library for validation, the button value disappears. All other form values remain accessible. Upon inspecting the library code, I noticed that the line "event.preventDefault()" seems to be causing this issue.
If I remove this line, everything works as expected, but unfortunately, the form validation will no longer function properly.
Does anyone have any insights or suggestions on how to resolve this? Any help would be greatly appreciated!
var submitHandler = function (event) {
// Only run on matching elements
if (!event.target.matches(selector)) return;
// Prevent form submission
event.preventDefault();
// Validate each field
var errors = publicAPIs.validateAll(event.target);
// If there are errors, focus on the first one
if (errors.length > 0) {
errors[0].focus();
emitEvent(event.target, 'bouncerFormInvalid', {errors: errors});
return;
}
// Otherwise, submit if not disabled
if (!settings.disableSubmit) {
event.target.submit();
}
// Emit custom event
if (settings.emitEvents) {
emitEvent(event.target, 'bouncerFormValid');
}
};
<button class="" name="page[__page]" type="submit" value="0">back</button>
<button class="" name="page[__page]" type="submit" value="2">next</button>