locked
Help Knockout - date of birth validation RRS feed

  • Question

  • User-523978134 posted
    • if applicant is younger than 18 in all states except alabama, display modal with validation message "Applicant must be 18 years of age to apply for credit."

    • if application is younger than 19 in Alabama, display modal with message: "Applicant must be 19 years of age to apply for credit."

     
     <div class="form-group col-md-6">
                            <label asp-for="BirthDate"></label>
                            <input class="form-control datepicker" asp-for="BirthDate" type="text" data-bind="datePicker: birthDate" placeholder="MMDDYYYY" />
                            <span asp-validation-for="BirthDate"></span>
                        </div>

    self.birthDate = ko.observable(source.birthDate);

    Tuesday, February 5, 2019 7:07 PM

All replies

  • User-1174608757 posted

    Hi srt 

    According to your description,It seems the value of text is the form of date. So, could you please tell me which date  would you like  to compare  with ? How 19 or 18 get ? 

    If you could post more details,it will help us to solve your problem quickly.

    Else  I suggest you to use Knockout  validation. Here is the link , I hope it could help you.

    https://github.com/Knockout-Contrib/Knockout-Validation

    Best Regards

    Wei Zhang

    Wednesday, February 6, 2019 8:09 AM
  • User-523978134 posted

    The way they enter the DOB ....calculate from the date entered by the applicant. 

    Wednesday, February 6, 2019 1:30 PM
  • User-1174608757 posted

    Hi srt,

    According to your description, I have made a sample here. You could use substring to get the year, month, and day of the date , then it will be easy for you to compare the date .

    Here is the demo , I hope it could help you

    aspx:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>             
      <script src="../Scripts/knockout-3.4.2.js"></script>
      <script src="../Scripts/moment.js"></script>
       <script type="text/javascript">
        
    </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
              <select data-bind="options: countries, optionsText: 'name', optionsValue: 'id', value: selectedChoice, optionsCaption: 'Choose..'"></select>
                    Birthday:  <input type="text" data-bind="value: dateTo" placeholder="MMDDYYYY" /> 
                <input id="Button1" type="button" value="button" data-bind="click: compare" />
                    
            </div>
            <script>
                var CountryModel = function(data){
                var self = this;
                self.id = ko.observable(data.id);
                self.name = ko.observable(data.name);
                 };
                function ViewModel() {
                    var self = this;
                    self.selectedChoice = ko.observable();
                    self.countries = ko.observableArray([
                    new CountryModel({ id: "1", name: "alabama" }),
                    new CountryModel({ id: "2", name: "other" })])
                    self.dateTo = ko.observable();
                    self.compare = function () {
                        var year = parseInt((new Date()).getFullYear()); // get the year of now 
                        var month = parseInt((new Date()).getMonth()) + 1;// get the month of now
                        var day = parseInt((new Date()).getDate());// get the day of now
    //selectedChoice() is the id of selected option if (this.selectedChoice() == "1") {
    var b = parseInt(self.dateTo().substring(6, 10)); if (year - b < 18)// date is less { alert("Applicant must be 18 years of age to apply for credit") } if (year - b == 18)// if date is just 18 between comparing date { var b1 = parseInt(self.dateTo().substring(0, 2)) if (month - b1 < 0)// campare month { alert("Applicant must be 18 years of age to apply for credit") } if (month - b1 == 0) { var b2 = parseInt(self.dateTo().substring(3, 5)) if (day - b2 < 0) //compare day { alert("Applicant must be 18 years of age to apply for credit") } } } } else { var b = parseInt(self.dateTo().substring(6, 10)); if (year - b < 19)// date is less { alert("Applicant must be 19 years of age to apply for credit") } if (year - b == 19)// if date is just 19 between comparing date { var b1 = parseInt(self.dateTo().substring(0, 2)) if (month - b1 < 0)// campare month { alert("Applicant must be 19 years of age to apply for credit") } if (month - b1 == 0)//compare day { var b2 = parseInt(self.dateTo().substring(3, 5)) if (day - b2 < 0) // campare month { alert("Applicant must be 19 years of age to apply for credit") } } } } } } var viewModel = new ViewModel(); ko.applyBindings(viewModel); </script> </form> </body> </html>

    it shows as below:

    Best Regards

    Wei Zhang 

    Thursday, February 7, 2019 7:08 AM