When should you use this function? There are several events that the input field could trigger while a user is filling out the form. One occurs as the user types each character. Another is when the user removes focus from the field. Or you could run the function when the form is submitted.

The Constraint Validation API requires that invalid fields be marked prior to submission. If any fields are invalid, the browser stops short of triggering the submit event. So doing the check on submit is too late.

The event triggered when the user removes focus from a field is known as a blur event. It is not a good choice for validation, either. Suppose the user’s cursor is in the email input, so that field has focus. If the user then presses the Return key, this would trigger form submission, but the blur event would not be triggered and any validation tied to it would not be performed.

So the validation check will need to happen as the user enters each character. Update the FormHandler module in formhandler.js with an addInputHandler prototype method. It should add a listener for the input event of the form. Like the addSubmitHandler method, it should accept a function argument.

...
  FormHandler.prototype.addSubmitHandler = function (fn) {
    ...
  };

  FormHandler.prototype.addInputHandler = function (fn) {
    console.log('Setting input handler for form');
  };

  App.FormHandler = FormHandler;
  window.App = App;
...

Attach the listener for the input event using jQuery’s on method. Make sure to use the event delegation pattern to filter out events created by anything but the [name="emailAddress"] field.

...
  FormHandler.prototype.addInputHandler = function (fn) {
    console.log('Setting input handler for form');
    this.$formElement.on('input', '[name="emailAddress"]', function (event) {
      // Event handler code will go here
    });
  };

  App.FormHandler = FormHandler;
  window.App = App;
...

Inside the event handler, extract the value of the email field from the event.target object. Then console.log the result of running addInputHandler’s function argument fn and passing it the value of the email field.

...
  FormHandler.prototype.addInputHandler = function (fn) {
    console.log('Setting input handler for form');
    this.$formElement.on('input', '[name="emailAddress"]', function (event) {
      // Event handler code will go here
      var emailAddress = event.target.value;
      console.log(fn(emailAddress));
    });
  };

  App.FormHandler = FormHandler;
  window.App = App;
...

Save formhandler.js.

In main.js, import Validation from the App namespace and assign it to a local variable.

...
  var Truck = App.Truck;
  var DataStore = App.DataStore;
  var FormHandler = App.FormHandler;
  var Validation = App.Validation;
  var CheckList = App.CheckList;
  var myTruck = new Truck('ncc-1701', new DataStore());
...

With the Validation object imported, you can connect it to FormHandler’s new addInputHandler method.

At the end of main.js, pass Validation.isCompanyEmail to the addInputHandler method of the formHandler instance:

...
  formHandler.addSubmitHandler(function (data) {
    myTruck.createOrder.call(myTruck, data);
    checkList.addRow.call(checkList, data);
  });

  formHandler.addInputHandler(Validation.isCompanyEmail);

})(window);

Save and reload. Fill out the email field and see what appears on the console. As you type a valid email address, the console will show a number of false results, printed by the console.log(fn(emailAddress)); line in FormHandler.prototype.addInputHandler. When you have finished typing a valid email address, you will see true printed in the console (Figure 12.4).

Figure 12.4  Logging the email validation check

Your validation function is run each time a character is entered (or removed) from the email field. When you have confirmed that it is correctly checking your input, you can use it to show a custom error message.

Now that you can reliably test that the email address is from your company’s domain, you should notify the user if the validation fails. You will use the setCustomValidity method for the event.target to mark it as invalid.

In formhandler.js, remove the console.log statement and replace it with a variable for a warning message and an if/else clause. If the fn(emailAddress) call returns true, clear the custom validity of the field. If it returns false, assign the message variable to a string with the warning message and set the custom validity to message.

...
  FormHandler.prototype.addInputHandler = function (fn) {
    console.log('Setting input handler for form');
    this.$formElement.on('input', '[name="emailAddress"]', function (event) {
      var emailAddress = event.target.value;
      console.log(fn(emailAddress));
      var message = '';
      if (fn(emailAddress)) {
        event.target.setCustomValidity('');
      } else {
        message = emailAddress + ' is not an authorized email address!'
        event.target.setCustomValidity(message);
      }
    });
  };
...

You passed in the error message that should be shown to the user. If there is no error, you still have to call setCustomValidity, but with an empty string as the argument. This has the effect of marking the field as valid.

The validation check that occurs as you type only marks the field as valid or invalid. It does not display the error message. When you press the Submit button, the browser checks for invalid fields and displays the validation message if it finds any.

To try it out, submit the form after entering an email address that does not match the domain. Right after you press the Submit button, you should see your custom validation message appear as a warning next to the field (Figure 12.5).

Figure 12.5  Only valid email addresses allowed!