Setting validations for card expiry date in a checkout form-CodePudding

Please be aware this checkout form will not actually be used to take payments

I need to apply validation restraints to prevent someone from setting their bank card expiry date before the current date but i am not sure how to do this.

<!--Option boxes-->
    <form>
        <div >
          <div >
          <div >
            <label for="expmonth">Expiry Month</label>
            <select id="expmonth" name="expmonth">
              <option value="01">January</option>
              <option value="02">February</option>
              <option value="03">March</option>
              <option value="04">April</option>
              <option value="05">May</option>
              <option value="06">June</option>
              <option value="07">July</option>
              <option value="08">August</option>
              <option value="09">September</option>
              <option value="10">October</option>
              <option value="11">November</option>
              <option value="12">December</option>
            </select>
          </div>
          </div>
          <div >
            <!--Labels and Inputs-->
          <div >  
            <label for="expyear">Exp Year</label>
            <select id="expyear" name="expyear">
              <option value="2022">2022</option>
              <option value="2023">2023</option>
              <option value="2024">2024</option>
              <option value="2025">2025</option>
              <option value="2026">2026</option>
              <option value="2027">2027</option>
              <option value="2028">2028</option>
              <option value="2029">2029</option>
              <option value="2030">2030</option>
              <option value="2031">2031</option>
              <option value="2032">2032</option>
              <option value="2033">2033</option>
              <option value="2034">2034</option>
              <option value="2035">2035</option>
              <option value="2036">2036</option>
              <option value="2037">2037</option>
              <option value="2038">2038</option>
              <option value="2039">2039</option>
              <option value="2040">2040</option>
              <option value="2041">2041</option>
              <option value="2042">2042</option>
              <option value="2043">2043</option>
              <option value="2044">2044</option>
              <option value="2045">2045</option>
              <option value="2046">2046</option>
              <option value="2047">2047</option>
              <option value="2048">2048</option>
              <option value="2049">2049</option>
            </select>
          </div>

          </div>
        </div>
      </div>
      
    </div>
    <!--Labels and Inputs-->
    <label>
      <input type="checkbox" checked="checked" name="sameadr"> Shipping address same as billing </label>
      <input type="submit" value="Checkout" >
  </form>

The code looks like this for my form ^ What JS should i use?

The checkout form that i used is this one https://www.w3schools.com/howto/howto_css_checkout_form.asp

CodePudding user response：

you just have to use javascript to get the value of the selected date and then check if the selected date is behind the current date, if it is so then change the date to current date or you can write your own logic to handle this scenario.

CodePudding user response：

as the HTML you use

you did apply some restrictions for the year

so the only thing you should put on your mind to

validate the month if the user entering the current year

like: 5 April 2022 this is not valid

so you can use this to validate the month you can add some CSS to alert the user I just disabled the button

    const d = new Date();
    const submitBtn = document.getElementById("btn");

const curruentMonth = d.getMonth()   1; //the start is 0

function validate() {
  var selectYear = document.getElementById("expyear");
  var year = selectYear.options[selectYear.selectedIndex].value;
  var selectMonth = document.getElementById("expmonth");
  var month = selectMonth.options[selectMonth.selectedIndex].value;

  if (year == 2022) {
    if (month <= curruentMonth) {
      submitBtn.disabled = false;
    }
  }
  submitBtn.disabled = true;
}
validate();

your HTML

<form>
        <div >
          <div >
          <div >
            <label for="expmonth">Expiry Month</label>
            <select id="expmonth" name="expmonth" onChange="validate()">
              <option value="1">January</option>
              <option value="2">February</option>
              <option value="3">March</option>
              <option value="4">April</option>
              <option value="5">May</option>
              <option value="6">June</option>
              <option value="7">July</option>
              <option value="8">August</option>
              <option value="9">September</option>
              <option value="10">October</option>
              <option value="11">November</option>
              <option value="12">December</option>
            </select>
          </div>
          </div>
          <div >
            <!--Labels and Inputs-->
          <div >  
            <label for="expyear">Exp Year</label onChange="validate()">
            <select id="expyear" name="expyear">
              <option value="2022">2022</option>
              <option value="2023">2023</option>
              <option value="2024">2024</option>
              <option value="2025">2025</option>
              <option value="2026">2026</option>
              <option value="2027">2027</option>
              <option value="2028">2028</option>
              <option value="2029">2029</option>
              <option value="2030">2030</option>
              <option value="2031">2031</option>
              <option value="2032">2032</option>
              <option value="2033">2033</option>
              <option value="2034">2034</option>
              <option value="2035">2035</option>
              <option value="2036">2036</option>
              <option value="2037">2037</option>
              <option value="2038">2038</option>
              <option value="2039">2039</option>
              <option value="2040">2040</option>
              <option value="2041">2041</option>
              <option value="2042">2042</option>
              <option value="2043">2043</option>
              <option value="2044">2044</option>
              <option value="2045">2045</option>
              <option value="2046">2046</option>
              <option value="2047">2047</option>
              <option value="2048">2048</option>
              <option value="2049">2049</option>
            </select>
          </div>

          </div>
        </div>
      </div>
      
    </div>
    <!--Labels and Inputs-->
    <label>
      <input type="checkbox" checked="checked" name="sameadr"> Shipping address same as billing </label>
      <input id="btn" type="submit" value="Checkout" >
  </form>
  <script src="index.js"></script>