Client side validation not triggering and Model State is True for out of mix max range value

[Muhammad Tassadaque Zia]

HI

I am trying to restrict datepicker to min max range.. In calendar dates got restricted but if I change date by typing (that is required in our case). No client validation trigger even on server side modelstate remains true. Sample is attached

Attachment: DatePicker_ForSample_5d6bb8f.zip

[Sureshkumar P]

Hi Muhammad, 

 

By default, if we provide any min and max value and tried to enter the value against that range, then in-built validation will occur, and error class will be added to the wrapper of the component and model value to be null.  

 

But we can achieve the client-side validation by using min and max custom form validation with the help of form validator as mentioned below. 

 

<form id="form-element" class="form-vertical"> 

        <div class="form-group"> 

            <ejs-datepicker id='BirthDate' format="MM/dd/yyyy" min="ViewBag.DPMinDate" max="ViewBag.DPMaxDate" placeholder="Selezionare una data"></ejs-datepicker> 

        </div> 

        <input type="submit" value="submit" /> 

    </form> 

<script> 

    document.addEventListener('DOMContentLoaded', function () { 

        var datepickerObject = document.getElementById("BirthDate").ej2_instances[0]; 

        var options = { 

            rules: { 

                //must specify the name attribute value in rules section 

                'BirthDate': { required: true, min: [minDate, 'MIN ERROR!'], max: [maxDate, 'MAX ERROR!'] } 

            }, 

            customPlacement: (inputElement, errorElement) => { 

                debugger 

                //to place the error message in custom position 

                //inputElement - target element where the error text will be appended 

                //errorElement - error text which will be displayed. 

                inputElement.parentElement.parentElement.appendChild(errorElement); 

            } 

        }; 

        var formObject = new ej.inputs.FormValidator('#form-element', options); 

        function minDate(args) { 

            var inputValue = datepickerObject.globalize.parseDate(args['value'], { format: datepickerObject.format, type: 'dateTime', skeleton: 'yMd' }); 

            if (+inputValue >= +datepickerObject.min.setHours(0, 0, 0, 0)) { 

                return true; 

            } else { 

                return false; 

            } 

        } 

        function maxDate(args) { 

            var inputValue = datepickerObject.globalize.parseDate(args['value'], { format: datepickerObject.format, type: 'dateTime', skeleton: 'yMd' }); 

            if (+inputValue <= +datepickerObject.max.setHours(0, 0, 0, 0)) { 

                return true; 

            } else { 

                return false; 

            } 

        } 

    }); 

 

</script> 

 

Please find the sample from the below link. 

 

Sample Link: https://www.syncfusion.com/downloads/support/forum/150410/ze/DatePicker_ForSample-1913723633  

 

Please find the UG link to know more about form validator. 

 

UG Link: https://ej2.syncfusion.com/documentation/form-validator/validation-rules/#adding-or-removing-rules  

 

Regards, 

Sureshkumar P 

[Muhammad Tassadaque Zia]

Thanks for reply.. it would be great if it was built in feature. As I understand if value of date picker is out of range i will receive null value on post but as I am seeing value is not made null receiving the same out of range value on post if I disable client side validation

[Sureshkumar P]

Hi Muhammad, 

 

Query 1:  

Thanks for reply.. it would be great if it was built in feature. 

Solution: 

Thanks for the suggestion. On further analysis, while implementing the reported problem, we could not predict the date format value based on the browser and handle in the form validation source. Also, we need to use our “min” and “max” validation rules for numeric values only. So, we can use our custom validation to achieve min and max validation for date values. 

For more information, please refer the below references. 

Ref: https://jqueryvalidation.org/min-method/#min-value 

https://jqueryvalidation.org/documentation/#link-list-of-built-in-validation-methods 

Query 2: 

As I understand if the value of date picker is out of range, I will receive null value on the post but as I am seeing value is not made null receiving the same out of range value on the post if I disable client-side validation 

Solution: 

We would like to inform you that, if you are given the value out of min and max range, then built-in validation will occur and e-error class will be added to the element to showcase that the entered value is out of range. But DatePicker model value will be maintained the entered value. Due to this, you get the entered value in the form POST action. When you entered an invalid date value, then the model value will be null.  

If you want to restrict to type the date value against the min and max values, we suggest you enable the strcitMode API as true in your application. 

API Link: https://ej2.syncfusion.com/documentation/api/datepicker/#strictmode 

 

 

Regards, 

Sureshkumar P