locked
How to compare multiple date fields in multiple DATE vars at the time of Submit? RRS feed

  • Question

  • User2142845853 posted

    HI,

    This c# mvc project has a Create/Edit page that contains about 40+ Date fields  So  a case will have an ISSUE DATE, then a START DATE, and End date.

    Then there can be many entries each have details but also a time something was done.  So Action1, 2, 3, 4 ->15 has a start and end date.

    The overall form has a main start and end.  Action1 start date cannot be BEFORE the main Issue date, and Action1 end date cannot be AFTER the case end date

    And all of the other Action1, 2, 3 have to be checked for the same thing.

    forums.asp.net/t/2115898.aspx?Datetime+compare+validation+using+ValidationAttribute+in+MVC

    Shows a solution to modify the MODEL so that values have to fit within a date range.  Seems overly complex.  Question is to do this in JavaScript at the time the submit

    is called?  How can the simple test for a date not being sooner or later generate the Validation error?   Goal:  If a user enters a date for a case item thats earlier than the main start date it must be an error that throws a validation message: "Date cannot be before start date"

    thanks

    Monday, June 22, 2020 6:31 PM

Answers

  • User475983607 posted

    JavaScript validation is not secure and only used for user experience.  Server side validation is still needed. 

    The following is a idea of how to test several dates using basic jQuery and selectors.

    @{
        ViewBag.Title = "Index";
    }
    
    <h2>Index</h2>
    
    <form>
        <div>
            <div>
                <input id="StartDate" name="StartDate" type="date" value="2020-06-01" />
                <input id="EndDate" name="EndDate" type="date" value="2020-06-22" />
            </div>
            <hr />
            <div>
                <input id="Date1" name="Date1" class="validateMe" type="date" value="2020-06-02" />
            </div>
            <div>
                <input id="Date2" name="Date2" class="validateMe" type="date" value="2020-05-02" />
            </div>
            <div>
                <input id="Date3" name="Date3" class="validateMe" type="date" value="2020-06-22" />
            </div>
        </div>
        <div>
            <input id="Submit1" type="submit" value="submit" />
        </div>
    </form>
    
    @section scripts{
        <script>
            $('form').submit(function (e) {
                $('.error').remove();
    
                var startDate = new Date($('#StartDate').val());
                var endDate = new Date($('#EndDate').val());
    
                $('.validateMe').each(function () {
                    let date = new Date($(this).val());
                    if (date < startDate | endDate < date) {
                        e.preventDefault();
                        $(this).parent().append("<span class='error' style='color:red'>Error</span>");
                    }
                });         
            });
        </script>
        
    }

    There's also standard validation libraries are designed for this type of logic.  

    https://jqueryvalidation.org/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 22, 2020 8:14 PM

All replies

  • User475983607 posted

    JavaScript validation is not secure and only used for user experience.  Server side validation is still needed. 

    The following is a idea of how to test several dates using basic jQuery and selectors.

    @{
        ViewBag.Title = "Index";
    }
    
    <h2>Index</h2>
    
    <form>
        <div>
            <div>
                <input id="StartDate" name="StartDate" type="date" value="2020-06-01" />
                <input id="EndDate" name="EndDate" type="date" value="2020-06-22" />
            </div>
            <hr />
            <div>
                <input id="Date1" name="Date1" class="validateMe" type="date" value="2020-06-02" />
            </div>
            <div>
                <input id="Date2" name="Date2" class="validateMe" type="date" value="2020-05-02" />
            </div>
            <div>
                <input id="Date3" name="Date3" class="validateMe" type="date" value="2020-06-22" />
            </div>
        </div>
        <div>
            <input id="Submit1" type="submit" value="submit" />
        </div>
    </form>
    
    @section scripts{
        <script>
            $('form').submit(function (e) {
                $('.error').remove();
    
                var startDate = new Date($('#StartDate').val());
                var endDate = new Date($('#EndDate').val());
    
                $('.validateMe').each(function () {
                    let date = new Date($(this).val());
                    if (date < startDate | endDate < date) {
                        e.preventDefault();
                        $(this).parent().append("<span class='error' style='color:red'>Error</span>");
                    }
                });         
            });
        </script>
        
    }

    There's also standard validation libraries are designed for this type of logic.  

    https://jqueryvalidation.org/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 22, 2020 8:14 PM
  • User2142845853 posted

    thanks so much

    Tuesday, June 23, 2020 5:47 AM