I’m building out a small vehicle inspection form application for my wife’s company using Onsen UI. The app allows users to visually and functionally check that a vehicle is free from damage and functioning as expected upon delivery. Users should be able to freely navigate between eight pages in the app, and when they get to the last page all data will be stored to a MySQL database. Before advancing to the next page in the flow, some simple validation checks are performed to make sure required data has been input.
All was working fine until I began adding validation checks into the flow. The problem I’m seeing is that when the Back button is clicked, the validation checks that should be performed when the Next button is clicked are triggered. I’m struggling to understand why the checks are triggering.
Each page has checks such as the following performed when the Next button is clicked:
function next(){
// Check each set of radio buttons to see if checked
var envelopeChecked = checkRadios('envelope'),
insuranceChecked = checkRadios('insurance'),
accidentChecked = checkRadios('accident'),
registrationChecked = checkRadios('registration'),
manualChecked = checkRadios('manual');
// If all radio buttons checked, the initial validity test is passed
var isFormValid = envelopeChecked &&
insuranceChecked &&
accidentChecked &&
registrationChecked &&
manualChecked;
console.log(isFormValid);
// TO DO: Add logic to check for entered value description for any observed damages
if (!isFormValid) {
console.log('Missing radio options page3');
} else {
const navigator = document.querySelector('#navigator');
/*navigator.pushPage('page4.html');*/
navigator.bringPageTop('page4.html');
}
checkRadios and checkText are simple validation checks to make sure all radio button groups have an option checked and all required textarea inputs have text. Any ideas on why these validation checks are triggering on the Back button?
