<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>