Chargify Custom JavaScript and Custom CSS

chargify-field-error-css

.field-error {
  color: #b94a48 !important;
  background: #f2dede !important;
  border: solid 1px #eed3d7 !important;
}

chargify-hide-default-none-radio-button

//replace XXXX with the number found in URL when editing the custom field:
// https://your-subdomain.chargify.com/setup/metafields/1234/edit
 
// USE WITH CAUTION
// http://www.w3.org/TR/html401/interact/forms.html#radio
// If no radio button in a set sharing the same control name is initially "on", 
// user agent behavior for choosing which control is initially "on" is undefined.
 
$(document).ready(function(){
 
  $('#metafield_XXXX_empty').hide();
  var noneLabel = $("label[for='metafield_XXXX_empty']");
  noneLabel.text("");
 
});

chargify-radio-button-require-yes

//replace XXXX with the number found in URL when editing the custom field:
// https://your-subdomain.chargify.com/setup/metafields/1234/edit
 
var form = $("#hosted-payment-form");
 
var submitbtn = $("#subscription_submit");
 
legend = $("div.metafield_configuration fieldset:first legend");
 
// require customer to select the "Yes" radio button option
submitbtn.click(function(){
  if ( $('input[name="subscription[metafields][XXXX]"]:checked').val() !== "Yes" ) {
    legend.addClass("field-error");
    return false;
  }
});
 
form.change(function(){
  if( $('input[name="subscription[metafields][XXXX]"]:checked').val() != ""){
    legend.removeClass("field-error");
    submitbtn.click(function(){
      return true;
    });
  } else {
    return false;
  }
});

chargify-text-field-require-yes

$(document).ready(function(){
  var customLabel1 = $("label[for='metafield_3600']");
  customLabel1.text("* " + customLabel1.text());
});
 
var textField = $("#metafield_3600");
 
var form = $("#hosted-payment-form");
 
var submitbtn = $("#subscription_submit");
 
// require customer to type 'yes' in the text field
submitbtn.click(function(){
  if ( textField.val().toLowerCase() !== "yes" ) {
    textField.addClass("field-error");
    return false;
  }
});
 
form.change(function(){
  if( textField.val() != ""){
    textField.removeClass("field-error");
    submitbtn.click(function(){
      return true;
    });
  } else {
    return false;
  }
});