Yale Charging Instructions

  • Show HTML
    
        <h1 class="text-center"><small>Yale Charging Instructions</small></h1>
        
        <form id="yale-charging-form" data-abide novalidate class="border" >
        
              <label id="company">Company 
                <span data-tooltip aria-haspopup="true" class="coa-tooltip has-tip" title="<img src='../assets/img/coa-co.png'>"> <i class="fa fa-info-circle"></i></span>
        
                <input type="text" value="CO" 
                name="company" required pattern="^CO\d{2}$" maxlength="4" minlength="4" aria-required="true">
        
                <span class="form-error">
                  Format: CO01
                </span>
              </label>
        
              <label id="charge-id">Grant, Gift, or Yale Designated ID
                <span data-tooltip aria-haspopup="true" class="coa-tooltip has-tip" title="<img src='../assets/img/coa-cid.png'>"> <i class="fa fa-info-circle"></i></span>
        
                <input id="charge-id-value" type="text" name="CID" required pattern="(^G[RKTB]\d{6}$)|(^G[ES]\d{6}$)|(^YD\d{6}$)" maxlength="8" minlength="8" aria-required="true">
        
                <span class="form-error">
                  Formats: GR123456, GK123456, GT123456, GB123456, GE123456, GS123456 or YD123456
                </span>
              </label>
        
              <label class="hide" id="cost-share">Cost Share (optional GE, GS or YD)
                <span data-tooltip aria-haspopup="true" class="coa-tooltip has-tip" title="<img src='../assets/img/coa-cs.png'>"> <i class="fa fa-info-circle"></i></span>
        
                <input id="cost-share-value" type="text" name="CS" pattern="(^G[ES]\d{6}$)|(^YD\d{6}$)" maxlength="8" minlength="8" aria-required="true">
        
                <span class="form-error">
                  Formats: GE123456, GS123456 or YD123456
                </span>
              </label>
        
            <div id="additional-required" >
              <label>Cost Center
                <span data-tooltip aria-haspopup="true" class="coa-tooltip has-tip" title="<img src='../assets/img/coa-cc.png'>"> <i class="fa fa-info-circle"></i></span>
        
                <input type="text" aria-required="true" required pattern="^CC\d{4}$" maxlength="6" minlength="6" name="CC" size="60" value="CC">   
        
                <span class="form-error">
                  Format: CC1234
                </span>     
              </label>
        
              <label>Program
                <span data-tooltip aria-haspopup="true" class="coa-tooltip has-tip" title="<img src='../assets/img/coa-pg.png'>"> <i class="fa fa-info-circle"></i></span>
        
                <input type="text" aria-required="true" required pattern="^PG\d{5}$" maxlength="7" minlength="7" name="PG" size="60" value="PG">     
        
                <span class="form-error">
                  Format: PG12345
                </span>      
              </label>
        
              <label>Project
                <span data-tooltip aria-haspopup="true" class="coa-tooltip has-tip" title="<img src='../assets/img/coa-pj.png'>"> <i class="fa fa-info-circle"></i></span>
        
                <input type="text" aria-required="true" required pattern="^PJ\d{6}$" minlength="8" maxlength="8" name="PJ" value="PJ">   
        
                <span class="form-error">
                  Format: PJ123456
                </span> 
              </label>
        
              <label>Assignee (optional)
        
                <span data-tooltip aria-haspopup="true" class="coa-tooltip has-tip" title="<img src='../assets/img/coa-assignee.png'>"> <i class="fa fa-info-circle"></i></span>
        
                <input type="text" aria-required="false" pattern="alpha_numeric" maxlength="8">
                <span class="form-error">
                  <em>This is probably not your own NetID</em>. This is the NetID of the person responsible for these charging instructions. 
                </span> 
              </label>
        
            </div>
        
            <button id="submit-payment" class="expanded button" name="submit-payment" type="submit" value="Submit">Submit</button>
        
        </form>
        
  • Show JavaScript
    
        // Display fields based on type of Charge ID
        $('#charge-id-value').bind('change', function(){
          var chargeID = this.value.toLocaleUpperCase();
          var grantID = new RegExp('^G[RKTB]');
          var giftID = new RegExp('^G[ES]');
          var ydesignatedID = new RegExp('^YD');
        
          if (grantID.test(chargeID)) {
            $('#additional-required').addClass('hide');
            $('#cost-share').removeClass('hide');
          }
        
          if (giftID.test(chargeID) || ydesignatedID.test(chargeID)){
            $('#additional-required').removeClass('hide');
            $('#cost-share').addClass('hide');
          }
        });
        
        
        // Move the input focus to the end of the input string
        $('#yale-charging-form :input[type=text]').focus(function() {
             setTimeout((function(el) {
                var strLength = el.value.length
        
                return function() {
                    if(el.setSelectionRange !== undefined) {
                        el.setSelectionRange(strLength, strLength);
                    } else {
                        $(el).val(el.value);
                    }
            }}(this)), 0);
        });
        
        // Convert input to uppercase
        $('#yale-charging-form input[type=text]').bind('change', function() {
           this.value = this.value.toLocaleUpperCase();
        });