This is an example of requiring a non required field on Chargify hosted pages through the use of our custom javascript. (this example demonstrates required billing zip with all other billing fields not required. This script can be utilized by adding it to your "Custom Javascript" on the "Hosted Pages Settings" found under the "Settings" tab. Exa…

require_billing_zip.js

$(function() {


  var $form      = $("form#hosted-payment-form"),
      $submit    = $form.find("input[type='submit']"),
      $label     = $form.find("label[for='subscription_payment_profile_attributes_billing_zip']"),
      submitText = $submit.val();

  // Mark billing zip as required
  $label.text("*" + $label.text());

  // Errors that you wish to display
  var $errorExplanation = $('<div class="errorExplanation" id="errorExplanation"><h2>There were problems with your submission</h2><p>Please correct the following problems:</p><ul><li>Billing Zip: cannot be blank.</li></ul></div>');

  $form.submit(function(e) {
    // Make sure to not double add the errors
    $('errorExplanation').remove();

    console.log("clicked");
    // don't submit the form if billing zip is empty
    if($.trim($form.find("input#subscription_payment_profile_attributes_billing_zip").val()).length == 0) {
      e.preventDefault();
      $errorExplanation.insertAfter("#hosted-description");
      $submit.val(submitText);
      // make button clickable again
      $submit.attr("disabled", false);
    }
  });

});