Silver challenge minimization of server requests

Frontend Web Development: The Big Nerd Ranch Guide Chapter 13: Ajax
1

I have several questions after working through this challenge. Because of the asynchronous call with RemoteDataStore’s get method (using jQuery’s get method), it finally dawned on me that we can’t add this handler to formhandler.js like we have been doing. So I added it directly to validation.js and put this code below.

I am not sure why it is suggested to open a second browser. I did notice that after every character input, the server request was being made. So I finally added in the same check I added in isCompanyEmail so that we only make server request when the email has the right form.

  1. Before I added this check to call get, I was able to submit with bad emails. So the original isCompanyEmail handler was no longer in effect. Now that I have this check, its back into effect. But I am repeating the regular expression check. So I am not sure how to avoid that? And how do we avoid overriding the original isCompanyEmail handler. It seems to me that the isCompanyEmail should be checked first and if that succeeds, then check if the email is already on the server.

  2. Is there something else to do to optimize? What does a second window do for us? I didn’t get that part.

  3. My emailInput is a jQuery object for the email input. It works fine with the .setCustomValidity method. But it does not work with other properties from the Constraint Validation API (here ). However, using querySelector (so not jQuery), we can. So is there a jQuery version of these properties? Why can we call the method but not the properties with the jQuery version of emailInput?

    addEmailAvailableHandler: function (db) {
    console.log(‘Setting duplicate email input handler for form’);
    var emailInput = $(’[data-coffee-order=“email”]’);

    // for some reason .setCustomValidity works on jQuery version
    // but .validity … properties does not work with jQuery version
    var emailInputNojQuery = document.querySelector(’[data-coffee-order=“email”]’);

    var cb = function(serverResponse) {
    var message = ‘’;
    if (serverResponse === null) {
    emailInput.setCustomValidity(message);
    } else {
    message = emailInput.val() + ’ already has an order!’;
    emailInput.setCustomValidity(message);
    } // end if/else

     // console.log(emailInput.validity); // undefined? why?

 console.log(emailInputNojQuery.validationMessage);
 console.log(emailInputNojQuery.validity);
 console.log(emailInputNojQuery.validity.customError);

    } // end cb(serverResponse)

    emailInput.on(‘input’, function(event) {
    var email = event.target.value;
    if ( /.+@me.com$/.test(email) ) {
    db.get(email, cb);
    } // end if
    });
    },

2

I did manage to figure out my first question. I added a check that the email input has no custom message set to it first. If the email is not a company email, the custom validation message was being set. But then it was being overridden by the message determined by this event handler. And my initial searches online have not shown a way to control the order event handling is done. I even tried to change the order that these event handlers are added to main, but it does not matter. The isCompanyEmail handler went first, and then this one.

So here is the modified part:

if (serverResponse === null) {
      if (!emailInputNojQuery.validity.customError) {
        emailInput.setCustomValidity(message);
      }

And then I took out the if before calling get.

3

I solved the exercize server requests minimisatoin by use of clearTimeout(timerID)/timerID=setTimeout(…) functions, inspired by advice in