Adding the validation for a form

<h2 class="page-heading">SPIFF 2022</h2>
<div class="container main">
<form class="spiff-form" data-mage-init='{"validation": {}}' method="post">
   <div class="spiff-contents">
       <div class="date-icon">
           <label for="date">Date</label>
           <input type="date" id="date" name="d" placeholder="DD/MM/YYYY" class="required-entry">
       </div>
       <div class="spiff-maincontents">
           <div class="field field-name-firstname required">
               <label class="label" for="firstname"><span>First Name</span></label>
               <div class="control">
                   <input type="text" id="firstname"
                          name="firstname" class="input-text required-entry" minlength="3" pattern="[A-Za-z]" >
               </div>
           </div>
               <div class="field field-name-lastname required">
                   <label class="label" for="lastname"><span>Last Name</span></label>
                   <div class="control">
                       <input type="text" id="lastname"
                              name="lastname" class="input-text required-entry" pattern="[A-Za-z]" >
                   </div>
               </div>
                   <div class="field field-name-address required">
                       <label class="label" for="homeaddress"><span>Home Address</span></label>
                       <div class="control">
                           <input type="text" id="homeaddress"
                                  name="address" class="input-text required-entry" pattern="[A-Za-z]"  minlength="8">
                       </div>
                   </div>
               <div class="field field-name-email required">
                   <label class="label" for="email"><span>Email</span></label>
                   <div class="control">
                       <input type="email" id="email"
                              name="email" class="input-email required-entry">
                   </div>
               </div>
           <div class="field field-name-DOB required">
               <label class="label" for="month-year"><span>D.O.B. (Day And Month Only)</span></label>
               <div class="control">
                   <input type="text" id="month-dob"
                          name="date-year" placeholder="MM-YYYY" class="required-entry">
<!--                   <input type="text" id="year-dob"-->
<!--                          name="date-year" placeholder="YYYY">-->
               </div>
           </div>
               <div class="field field-name-social required">
                   <label class="label" for="social-security"><span>Social Security</span></label>
                   <div class="control">
                       <input type="number" id="social-security"
                              name="social-security" class="input-number required-entry">
                   </div>
               </div>
               <div class="secondary-content">
                   <div class="secondary-heading">
                       <h2 class="heading2">
                           Online SPIFF Informations
                       </h2>
                   </div>
<div class="field field-name-routing required">
                       <label class="label" for="routing-number"><span>ACH Routing Number</span></label>
                       <div class="control">
                           <input type="number" id="routing-number"
                                  name="routing-number" class="input-number required-entry">
                       </div>
                   </div>
                   <div class="field field-name-account-number required">
                       <label class="label" for="account-number"><span>Account Number</span></label>
                       <div class="control">
                           <input type="number" id="account-number"
                                  name="account-number" class="input-number required-entry">
                       </div>
                   </div>
               </div>
           </div>
                <div class="newspiffblock-content">
                    <?php
                    echo $this->getLayout()
                        ->createBlock('Magento\Cms\Block\Block')
                        ->setBlockId('spiff_block')
                        ->toHtml();
                    ?>
                </div>
       <div class="spiff-othercontent">
           <h2 class="contact-heading"> Please return this form with your first eligible order to <b>ar@corpdesign.com</b> </br> or via fax to 954-756-8181 </h2>
       </div>
                    <div class="primary spiffsubmit">
                       <button type="submit" class="action save primary" title="Save" id="spiffform" >
                       <span>Submit</span>
                       </button>
                    </div>
   </div>
</form>
</div>
<script type="text/x-magento-init">
    {
        ".spiff-form": {
            "validation": {}
        }
    }
</script>

Leave a comment

Your email address will not be published. Required fields are marked *