Validation for start year and end year

2 posts, 0 answers
  1. durga bhavani
    durga bhavani avatar
    19 posts
    Member since:
    May 2012

    Posted 05 Jul 2012 Link to this post

    Hi,

    I am having two drop downs(start year and end year) which consists of years.
    I want to  validate the end year such that end year should always greater 
    than start year.If the end is less than start year then i want to display a validation
    message next to the second drop down

    Is it possible in kendo ui.provide me samples if possible


    Thanks,
    Bhavani
  2. Chuck
    Chuck avatar
    35 posts
    Member since:
    Oct 2008

    Posted 15 Apr 2013 Link to this post

    Here is one way to use the kendoValidator and compare to divs that contain years.

    <div id="comparediv" style="border:1px solid black">
        <p>Validate that the start year is before the end year.</p>
        <p><label for="start">Start:</label>
        <select id="start" name="start">
                    <option>2008</option>
                    <option>2009</option>
                    <option>2010</option>
                    <option>2011</option>
                </select></p>
                <p><label for="end">End:</label>
        <select id="end" name="end">
                    <option>2008</option>
                    <option>2009</option>
                    <option>2010</option>
                    <option>2011</option>
                </select></p>
        <button type="submit" id="submityear" value="submityear">submit year</button>
        </div>

    your script would be something like

    <script>
            (function(){
               var yearvalidator = $("#comparediv").kendoValidator({
                  rules: {
                     custom: function(input){
                        if(input.is("[name=end]")){
                           var start = parseInt($("#start").val());
                           var end = parseInt($("#end").val());

                           if(end > start){ return true; }
                       } else { return true; }
                     }
                  },
                  messages:{
                     custom: "end year must be greater that start year"
                  }
               }).data("kendoValidator");
               $("#submityear").on("click", function(){
                  if(yearvalidator.validate()){
                    alert("no worries");
                  }
               });
            })();
            </script>


    I also put together a sample page at examples.chilifunfactory.com 
    I also put up a blog post on my site.
  3. Kendo UI is VS 2017 Ready
Back to Top