chrome/test/data/autofill/heuristics/input/24_checkout_virgin_america.com.html

   1 <form method="POST"  autocomplete="on" data-vx-form-handler="" data="creditCard.cardData" data-fields="creditCard.cardFields" data-submit-error-message="Add card info to continue" data-on-success="creditCard.onAddCard()">
   2
   3             <div data-vx-form-creditcard="" name="creditCard" data-input-label="Card number" data-form-handler="formHandler" data-cc-type="creditCard.cardData.type" >
   4   <div  ng- ng-show="input.isVisible" data-vx-form-input="" type="text" name="creditCard" data-input-label="" data-validate="required,creditCardNumber,creditCard" autocorrect="off" maxlength="16" pattern="\d*" data-input-readonly="" data-input-autocompletetype="cc-number" data-input-autocomplete="on">
   5     <label >
   6
   7         <span ng-show="!input.label &amp;&amp; !input.placeholderSupport &amp;&amp; input.showFakePlaceholder" ng-bind="input.placeholder" ></span>
   8         <div >
   9                 <input maxlength="16" autocomplete="on"  ng-readonly="input.readonly" ng-model="input.value" ng-change="input.validateValue(input.value)" x-autocompletetype="input.autocompletetype" ng-class="{
  10                     'is-valid': input.isInputValid() === true &amp;&amp; input.isMessagingVisible,
  11                     'is-invalid': input.isInputValid() === false &amp;&amp; input.isMessagingVisible,
  12                     'input-text-optional': input.isOptional
  13                 }" type="text" name="creditCard" autocorrect="off" pattern="\d*" inputautocompletetype="cc-number" inputautocomplete="on" ng >
  14                 <span ng-show="input.isMessagingVisible"  ng-class="{
  15                 'is-valid': input.isInputValid() === true,
  16                 'is-invalid': input.isInputValid() === false,
  17                 'input-message-optional': input.isOptional
  18             }">Invalid card #</span>
  19             </div>
  20         <div  ng-transclude=""></div>
  21     </label>
  22 </div>
  23   <ul  ng-hide="inputReadonly">
  24       <li  ng->American Express</li>
  25       <li  ng->Discover</li>
  26       <li  ng->Mastercard</li>
  27       <li  ng->Visa</li>
  28       <li  ng->UATP</li>
  29   </ul>
  30 </div>
  31
  32             <div  ng- ng-show="input.isVisible" data-vx-form-input="" data-input-autocompletetype="cc-name" data-input-autocomplete="on" type="text" name="cardholderName" data-input-label="Cardholder's name" data-validate="required,name" autocorrect="off">
  33     <label >
  34         Cardholder's name
  35         <span ng-show="!input.label &amp;&amp; !input.placeholderSupport &amp;&amp; input.showFakePlaceholder" ng-bind="input.placeholder" ></span>
  36         <div >
  37                 <input maxlength="" autocomplete="on"  ng-readonly="input.readonly" ng-model="input.value" ng-change="input.validateValue(input.value)" x-autocompletetype="input.autocompletetype" ng-class="{
  38                     'is-valid': input.isInputValid() === true &amp;&amp; input.isMessagingVisible,
  39                     'is-invalid': input.isInputValid() === false &amp;&amp; input.isMessagingVisible,
  40                     'input-text-optional': input.isOptional
  41                 }" inputautocompletetype="cc-name" inputautocomplete="on" type="text" name="cardholderName" autocorrect="off" ng >
  42                 <span ng-show="input.isMessagingVisible"  ng-class="{
  43                 'is-valid': input.isInputValid() === true,
  44                 'is-invalid': input.isInputValid() === false,
  45                 'input-message-optional': input.isOptional
  46             }">Good</span>
  47             </div>
  48         <div  ng-transclude=""></div>
  49     </label>
  50 </div>
  51
  52             <div >
  53                 <span >Expiration Date</span>
  54                 <div >
  55                     <div ng- ng-show="select.isVisible" data-vx-form-select-array="" data-select- data-select-name="expireMonth" data-select-title="Month" data-select-options="months" data-validate="required" >
  56     <select  name="expireMonth" vx-common-custom-select="" ng-model="select.value" ng-options="option.name for option in select.options" ng-change="select.validateValue(select.value)" ng-switch="select.hasTitle" ><!-- ngSwitchWhen: true --><option value="" ng-switch-when="true" >Month</option><option value="0">January</option><option value="1">February</option><option value="2">March</option><option value="3">April</option><option value="4">May</option><option value="5">June</option><option value="6">July</option><option value="7">August</option><option value="8">September</option><option value="9">October</option><option value="10">November</option><option value="11">December</option></select><span  ><span  >Month</span></span>
  57 </div>
  58                 </div>
  59                 <div >
  60                     <div ng- ng-show="select.isVisible" data-vx-form-select-array="" data-select- data-select-name="expireYear" data-select-title="Year" data-select-options="years" data-validate="required" >
  61     <select  name="expireYear" vx-common-custom-select="" ng-model="select.value" ng-options="option.name for option in select.options" ng-change="select.validateValue(select.value)" ng-switch="select.hasTitle" ><!-- ngSwitchWhen: true --><option value="" ng-switch-when="true" >Year</option><option value="0">2014</option><option value="1">2015</option><option value="2">2016</option><option value="3">2017</option><option value="4">2018</option><option value="5">2019</option><option value="6">2020</option><option value="7">2021</option><option value="8">2022</option><option value="9">2023</option><option value="10">2024</option><option value="11">2025</option></select><span  ><span  >Year</span></span>
  62 </div>
  63                 </div>
  64             </div>
  65
  66             <div  ng- ng-show="input.isVisible" data-vx-form-input="" data-type="text" data-maxlength="4" data-name="securityNumber" data-autocorrect="off" data-pattern="\d*" data-input- data-input-label="CVV Number" data-validate="required,security" data-inputmode="numeric">
  67     <label >
  68         CVV Number
  69         <span ng-show="!input.label &amp;&amp; !input.placeholderSupport &amp;&amp; input.showFakePlaceholder" ng-bind="input.placeholder" ></span>
  70         <div >
  71                 <input maxlength="4" autocomplete="on"  ng-readonly="input.readonly" ng-model="input.value" ng-change="input.validateValue(input.value)" x-autocompletetype="input.autocompletetype" ng-class="{
  72                     'is-valid': input.isInputValid() === true &amp;&amp; input.isMessagingVisible,
  73                     'is-invalid': input.isInputValid() === false &amp;&amp; input.isMessagingVisible,
  74                     'input-text-optional': input.isOptional
  75                 }" type="text" name="securityNumber" autocorrect="off" pattern="\d*" inputmode="numeric" ng >
  76                 <span ng-show="input.isMessagingVisible"  ng-class="{
  77                 'is-valid': input.isInputValid() === true,
  78                 'is-invalid': input.isInputValid() === false,
  79                 'input-message-optional': input.isOptional
  80             }">Good</span>
  81             </div>
  82         <div  ng-transclude="">
  83                 <div >3 or 4 digit number<br>on the back or front corner<br>of your card. <a href="#" vx-common-prevent-default="" ng-click="creditCard.showCVVInfo()">See an example</a></div>
  84             </div>
  85     </label>
  86 </div>
  87
  88             <div  ng- ng-show="input.isVisible" data-vx-form-input="" type="text" name="nickname" data-input-label="Card's nickname" placeholder="e.g. My Visa, Corporate card, etc" data-validate="required" autocorrect="off" data-is-visible="purchase.isElevateUser">
  89     <label >
  90         Card's nickname
  91         <span ng-show="!input.label &amp;&amp; !input.placeholderSupport &amp;&amp; input.showFakePlaceholder" ng-bind="input.placeholder" >e.g. My Visa, Corporate card, etc</span>
  92         <div >
  93                 <input maxlength="" autocomplete="on"  ng-readonly="input.readonly" ng-model="input.value" ng-change="input.validateValue(input.value)" x-autocompletetype="input.autocompletetype" ng-class="{
  94                     'is-valid': input.isInputValid() === true &amp;&amp; input.isMessagingVisible,
  95                     'is-invalid': input.isInputValid() === false &amp;&amp; input.isMessagingVisible,
  96                     'input-text-optional': input.isOptional
  97                 }" type="text" name="nickname" placeholder="e.g. My Visa, Corporate card, etc" autocorrect="off" isvisible="purchase.isElevateUser" ng>
  98                 <span ng-show="input.isMessagingVisible"  ng-class="{
  99                 'is-valid': input.isInputValid() === true,
 100                 'is-invalid': input.isInputValid() === false,
 101                 'input-message-optional': input.isOptional
 102             }"></span>
 103             </div>
 104         <div  ng-transclude=""></div>
 105     </label>
 106 </div>
 107
 108             <ul  data-vx-form-radio="" data-radio-name="useAddress" data-radio-label="address" data-validate="required" ng-show="storedAddresses.length">
 109                 <li  ng->
 110                     <label  for="use-stored-address">
 111                         <input type="radio" id="use-stored-address" name="useAddress" value="use-stored-address" ng-click="creditCard.selectAddressOption('use-stored-address')" ng-model="radio.useAddress" ng-change="radio.validateValue(radio.useAddress)" ng-selected="radio.validateValue(true); creditCard.addressOption === 'use-stored-address'" >
 112                         Use stored address
 113                     </label>
 114                     <div  ng-show="creditCard.addressOption === 'use-stored-address'">
 115                         <select name="stored-address"  vx-common-custom-select="" ng-model="storedAddress" ng-options="storedAddress.addressName for ($index, storedAddress) in storedAddresses" ng-change="creditCard.updateSelectedAddress(storedAddress)" ><option value="?" selected="selected"></option></select><span  ><span  >&nbsp;</span></span>
 116                         <dl  ng-show="creditCard.selectedAddress.addressOne">
 117                             <dt ></dt>
 118                             <dd ></dd>
 119                             <dd ng-show="creditCard.selectedAddress.addressTwo" ></dd>
 120                             <dd >,  </dd>
 121                             <dd ></dd>
 122                         </dl>
 123                     </div>
 124                 </li>
 125                 <li  ng->
 126                     <label  for="add-new-address">
 127                         <input type="radio" id="add-new-address" name="useAddress" value="add-new-address" ng-click="creditCard.selectAddressOption('add-new-address')" ng-model="radio.useAddress" ng-change="radio.validateValue(radio.useAddress)" ng-selected="creditCard.addressOption === 'add-new-address'"  selected="selected">
 128                         Add new address
 129                     </label>
 130                 </li>
 131             </ul>
 132
 133             <div  ng-show="checkbox.isVisible" data-vx-form-checkbox="" name="shouldSave" data-input-label="Save credit card info" data-is-optional="optional" data-is-visible="purchase.isElevateUser">
 134   <label  ng->
 135       <input  type="checkbox" ng-model="checkbox.value" ng-change="checkbox.validateValue(checkbox.value)" vxformcheckbox="" name="shouldSave" isoptional="optional" isvisible="purchase.isElevateUser">
 136       Save credit card info
 137       <span  ng-transclude=""></span>
 138   </label>
 139 </div>
 140
 141             <div >
 142                 <button  ng- data-vx-form-submit="">
 143     Add card info to continue
 144     <span  ng-show="formHandler.isLoading">
 145         <span>•</span><span>•</span><span>•</span>
 146     </span>
 147 </button>
 148             </div>
 149
 150             <div >
 151                 or <a href="#" vx-common-prevent-default="" ng-click="purchase.changePaymentView('select')">select another payment method</a>
 152             </div>
 153         </form>