Skip to main content

BIN OHOOh Documentation

  • Author:

  • Version: 39

  • Description: Example of credit card form, Expiration Date option All in One {MM}-{Year} - ideas taken from http://baymard.com/blog/how-to-format-expiration-date-fields https://www.dropbox.com/s/wgp1k7817sj9ckg/dynamically%20change%20the%20security%20code%20descr...

  • Created: 2014-09-21

  • Modified: 2015-12-20

  • Source:

     Edit Bin W3C Schema Json-Schema Java Bean Code Default Value as XML

    Printers Embed Responsive 

    <complexType name='CreditCard'
		description='Example of credit card form, Expiration Date option #3 All in One {MM}-{Year} - ideas taken from http://baymard.com/blog/how-to-format-expiration-date-fields https://www.dropbox.com/s/wgp1k7817sj9ckg/dynamically%20change%20the%20security%20code%20description.mov '>
    <field name='NameOnCard' 
	extra:form.caption="Cardholder's name"
	extra:form.explanation='As it appears on the credit card' type='xs:string' >
        <facet name='minLength' value='2'/>
    </field>
    <field name='CreditCardNumber' type='xs:NMTOKEN' 
	extra:form.control='CreditCardNumber' 
	extra:form.explanation='12-19 digits, spaces are allowed' 
	extra:form.placeholder='4111 1111 1111 1111'>
        <facet name='minLength' value='12'/>
        <facet name='maxLength' value='19'/>
    </field>
    <field name='CreditCardExpirationDateMY' type='xs:date'  
	caption='Expiration Date' 
	extra:form.explanation='The date your card expires, typically on front of card'
	extra:form.day.fixed='last()'
	extra:form.yearmonth.css='input-small'
	extra:form.month.format='number'
	extra:form.month.min='now'
	extra:form.year.interval='4'
	extra:form.control='dateSelectMY' 
	/>
    <field name='SecurityCode' type='xs:string'   
	caption='CVV / CVC Security Code' 
	extra:form.explanation='3-4 digit code, typically on the back of your card'
	extra:form.placeholder='123'
	extra:ic.css='input-mini'
	extra:html5.inputmode='numeric'
	extra:ctrl.prefix='&lt;div class="input-append">'
	extra:ctrl.suffix='&lt;a class="add-on badge" href="http://www.cvvnumber.com/cvv.html" target="_blank">What is this ?&lt;/a>&lt;/div>'
	extra:html5.type='text'  >
        <facet name='minLength' value='3'/>
        <facet name='maxLength' value='4'/>
        <facet name='pattern' value='[0-9][0-9][0-9][0-9]?'/>
    </field>
</complexType>