We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

150410 Jan 6,2020 11:46 AM UTC Jan 8,2020 01:38 PM UTC ASP.NET Core - EJ 2 3
loading
Tags: DatePicker
Muhammad Tassadaque Zia
Asked On January 6, 2020 11:46 AM UTC

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 [Syncfusion]
Replied On January 7, 2020 01:12 PM UTC

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. 
 
 
Please find the UG link to know more about form validator. 
 
 
Regards, 
Sureshkumar P 


Muhammad Tassadaque Zia
Replied On January 7, 2020 06:58 PM UTC

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 [Syncfusion]
Replied On January 8, 2020 01:38 PM UTC

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. 
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. 
 
 
Regards, 
Sureshkumar P 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon