In this project we receive user input from a travel website’s online booking form. We must make sure that the user input matches the formatting criteria we have determined to be accepted into our database.
To start, we add the event listener to the submit event itself, not the click event on the submit button. Because of this, it’s not just watching for the submit button being clicked but for anything that causes the form submit event to occur. A small but important distinction here.
document.addEventListener(“DOMContentLoaded”, () => { //anonymous function
$(“#reservation_form”).addEventListener(“submit”, validateForm);
});
When the user requests to submit the form, the program calls the function validateForm.
In validateForm, we stop the form from submitting by using event.preventDefault method on the event object. This gives us the chance to validate the data being input by the user, before it gets submitted to the database.
var validateForm = function(e) {
e.preventDefault();
}
We start the validation process by getting the data input by the user for ‘Arrival date’. We receive it as a string since the user is typing their input into a form. This means we must convert the data type from a string type to a Date type in order to work with it.
We use new Date(user_input) constructor to convert the string to a date object.
We then create a variable named today to hold today’s date. We use the same date constructor, new Date( ), but with no input this time.
// Grabs the user input for ‘arrival date’
const arrival_date_str = $(“#arrival_date”).value.trim();
// Convert arrival_date_str to a date format
const arrival_date = new Date(arrival_date_str);
// Gives you todays date
const today = new Date();
We then use an if statement to verify that there was a date input by the user, it was in date format, and it was after today’s date. If any of these conditions turn out to be false, the program then displays an error to the user until they make the necessary corrections to their answers on the form. Once all conditions come back as being true, the program moves to the next piece of code in the validateForm function which validates the next input field on the form.
// Check if date is given, if in date format, if after today’s date
if (arrival_date_str == “” || isNaN(arrival_date.getTime()) || arrival_date <= today) {
showError($(“#date_error”), “REQUIRED: Valid date.”);
isValid = false;
} else
clearError($(“#date_error”));
}
You then repeat the process for each piece of user input you want to have validated. Start by getting the user input, convert the data type(if needed) to work with it, and evaluate it using an if else statement according to your specified criteria.
Once you’ve gone through all of the user input you want validated, you then, and only then, trigger the form submission once all user input passes thee validation conditions. In this case isValid() evaluates to true when all input passes, and therefore triggers the submit command at the end of the validateForm function.
// If no errors, submit form
if (isValid) {
e.target.submit();
}
If any of the conditions fail, an error message gets displayed to the user that directs them to correct their input before the form is able to be submitted. Either the user inputs a valid input in the format required, or the form doesn’t get submitted. This maintains the quality of data being submitted to the database by an automated online form.
Peter Linton
Software Developer
