// as a reminder, jQueryHostedFields is a reference to a jQuery object. 
// The CSS style of the hosted fields will mimic the underlying fields, so for example, if you
// change the credit card field to have a red background, then the hosted fields will also change to red.
 
    jQueryHostedFields("#cardNumber").on('change', function(){
	  // When a change occurs, the hosted field library will add one of three classes to the underlying input: noCreditCardNumber, invalidCreditCardNumber, validCreditCardNumber

      if (!jQueryHostedFields(this).val() || jQueryHostedFields(this).hasClass("noCreditCardNumber")) {
        // No value in the credit card field
      }
      if (jQueryHostedFields(this).hasClass("invalidCreditCardNumber")) {
        // The value in the credit card field is invalid
      }
    });

    jQueryHostedFields("#cvv2").on('change', function(){
      // Clear existing classes
      jQueryHostedFields("#cvv2").removeClass("noCreditCardCvv2");
      jQueryHostedFields("#cvv2").removeClass("validCreditCardCvv2");
      jQueryHostedFields("#cvv2").removeClass("invalidCreditCardCvv2");

      // Regex for basic validation of a masked CVV2 value.
      var re = /[X]{3,4}/i;

      // Test to see if the field is empty, appears valid or is invalid
      var fieldValue = jQueryHostedFields(this).val();
      if (fieldValue === "") {
        jQueryHostedFields("#cvv2").addClass("noCreditCardCvv2");
      } else if (re.test(fieldValue)) {
        jQueryHostedFields("#cvv2").addClass("validCreditCardCvv2");
      } else {
        jQueryHostedFields("#cvv2").addClass("invalidCreditCardCvv2");
      }
    });

    // Perform initial validation
    jQueryHostedFields("#cardNumber,#cvv2").trigger("change");