ASP.NET Age Validation From DDLs Javascript

Question

fairly new to JS and C#. I am working on a webform and one of the requirements is I need a user to enter their birthdate using 3 drop down lists: Month, Day and Year.

I need to validate client side using a custom validator that will display an error if the user is under 18 years old. This is what I have so far:

function AgeValidation(source, args) {
              var month = document.getElementById('lblPatBirthMonth');
              var day = document.getElementById('lblPatBirthDay')
              var year = document.getElementById('lblPatBirthYear')
              let birthdate = new Date(year, month, day)
              var today = new Date();
              var age = today.getFullYear() - birthdate.getFullYear();
              var m = today.getMonth() - birthDate.getMonth();

          if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
              age--;
              args.IsValid = true;
          }
          if (age < 16) {
              args.IsValid = false;

              alert('You are not eligible. Age should be above 16...!!!')
          }
          
      }

         <%--patients birthdate--%>
           
            <div class="w3-row-padding">
                <div class="w3-col" style="width:20%">
                <asp:Label ID="lblPatBDay" runat="server" Text="<%$Resources:Resource, lblPatBDay %>"></asp:Label>
                </div>
                <div class="w3-col" style="width:20%">
                    <asp:Label ID="lblPatBirthMonth" runat="server" Text="<%$Resources:Resource, lblPatBirthMonth %>"></asp:Label>
                    <asp:DropDownList ID="ddlPatBirthMonth" runat="server" CssClass="w3-input w3-border"></asp:DropDownList>
                </div>
                <div class="w3-col" style="width:20%">
                    <asp:Label ID="lblPatBirthDay" runat="server" Text="<%$Resources:Resource, lblPatBirthDay %>"></asp:Label>
                    <asp:DropDownList ID="ddlPatBirthDay" runat="server" CssClass="w3-input w3-border"></asp:DropDownList>
                </div>
                <div class="w3-col" style="width:20%">
                    <asp:Label ID="lblPatBirthYear" runat="server" Text="<%$Resources:Resource, lblPatBirthYear %>"></asp:Label>
                    <asp:DropDownList ID="ddlPatBirthYear" runat="server" CssClass="w3-input w3-border"></asp:DropDownList>
                </div>

    <div class="w3-row-padding">
                <div class="w3-col" style="width:20%">
                <asp:CustomValidator ID="cvAgeDisclaimer" runat="server" ErrorMessage="CustomValidator" ClientValidationFunction="AgeValidation"></asp:CustomValidator>
                </div>
            </div>

score 0 · Accepted Answer · answered Jul 30 '20 at 17:27

You are almost there. You just need to get dropdown values via Javascript properly:

function AgeValidation(source, args) {
    var ddlMonth = document.getElementById("<%=ddlPatBirthMonth.ClientID%>");  
    var month = ddlMonth.options[ddlMonth.selectedIndex].value;  

    var ddlDay = document.getElementById("<%=ddlPatBirthDay.ClientID%>");  
    var day = ddlDay.options[ddlDay.selectedIndex].value;  

    var ddlYear = document.getElementById("<%=ddlPatBirthYear.ClientID%>");  
    var year = ddlYear.options[ddlYear.selectedIndex].value;  
    
    let birthdate = new Date(year, month, day)
    var today = new Date();
    var age = today.getFullYear() - birthdate.getFullYear();
    var m = today.getMonth() - birthDate.getMonth();

  if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
      age--;
      args.IsValid = true;
  }
  if (age < 16) {
      args.IsValid = false;

      alert('You are not eligible. Age should be above 16...!!!')
  }
  
}

See Get selected value in dropdown list using JavaScript

ASP.NET Age Validation From DDLs Javascript

1 Answers1