Share via


How to validate from date and to date in MVC3 razor (end date cannot be less than startdate etc)

Question

Thursday, October 27, 2011 10:52 AM

HI,

    i have two date pickers one for from date and other for to date.. i need to validate them to make sure To date id not in the past than From date.

Please help me.

 

 

All replies (10)

Sunday, October 30, 2011 6:31 AM ✅Answered

The DateRangeAttribute of my Mvc Controls Toolkit accepts also "Today" and "Now" as range constraints. Moreover it accepts also dynamic constraints where two Dates are compared. Validation is performed on both server side and client side. Moreover if you use it in conjunction with the DateTimeInput control dates are automatically corrected to conforms with the constraints in a way you can easily program. For instance, by setting the RangeAction parameter to RangeAction.Propagatte when a from date becomes bigger that a to date the to date is automatically increased. Choosing RangeAction.Verify doesnt allow the user to enter a date bigger than the to date. Obviously the same constraints apply also in the reverse direction. 


Sunday, October 30, 2011 11:50 PM ✅Answered

Hi

http://blogs.msdn.com/b/stuartleeks/archive/2011/01/25/asp-net-mvc-3-integrating-with-the-jquery-ui-date-picker-and-adding-a-jquery-validate-date-range-validator.aspx

Hope this helpful

Regards

Young Yang

 


Thursday, October 27, 2011 3:05 PM

You grab the values and compare them. The best solution is to use jquery validate plugin as you can define custom rules. This should solve you're problem: http://stackoverflow.com/questions/833997/end-date-greater-than-start-date-jquery-validation/2241515#2241515 The notation is simple:

<script type="text/javascript">

    $(document).ready(function () {       
        $('#sqlLogins').validate({

            rules: {               
                numberFrom: {
                    required: true,
                    min:0,
                    digits: true
                },
                numberTo: {
                    required: true,
                    digits: true,
                    min: function () { return $('#numberFrom').val()}                    
                }
            }

        }); //validate       
    });

In your view:

   <div class="display-label">Number from <span style="color:Red">*</span></div>
                <div class="display-field"><%: Html.TextBox("numberFrom", "", new { @class = "required" })%></div>
        
                <div class="display-label">Number to <span style="color:Red">*</span></div>
                <div class="display-field"><%: Html.TextBox("numberTo", "", new { @class = "required" })%></div>              
                
                <input type="submit" class="check" value="Create users and logins"/>

#sqlLogins is an id of the form, you add a class="check" to your submit button and your fields must have a class="required"

Hope it helps.


Thursday, October 27, 2011 3:26 PM

Hi, i have my date fields as

<input type="text" id="date" name="numberFrom" value="click here..." size="12"/>

<input type="text" id="datePicker" name="EndDate" value="click here..." size="12"/>

SO, I am confused on how to use the Jquery for validating.. please help

 

 

 


Thursday, October 27, 2011 3:28 PM

i mean In Razor engine for MVC3..


Thursday, October 27, 2011 4:07 PM

 I've provided you the link to the solution and a example of a similar validation. Go to Shared then open _Layout and add the following

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>

In your document ready add:

$(document).ready(function() {
    jQuery.validator.addMethod("greaterThan", function(value, element, params) {

        if (!/Invalid|NaN/.test(new Date(value))) {
            return new Date(value) > new Date($(params).val());
        }
        return isNaN(value) && isNaN($(params).val()) || (parseFloat(value) > parseFloat($(params).val())); 
    },'Must be greater than {0}.');

and add the following

 $("#datePicker").rules('add', { greaterThan: "#date" });

or to validate on form submit

$("form").validate({
    rules: {
        datePicker: { greaterThan: "#date" }
    }
});
});

Go and explore http://docs.jquery.com/Plugins/Validation and http://docs.jquery.com/Plugins/Validation/Validator/addMethod and here is a nice example http://weblogs.asp.net/cibrax/archive/2008/08/01/combining-jquery-validation-with-asp-net-mvc.aspx


Thursday, October 27, 2011 4:48 PM

i have this in document ready..but seems that it doesnt do anything.. i ahve alos added JQuery file reference in _layout page..

not sure what am missing.. please help

jQuery.validator.addMethod("greaterThan", function(value, element, params) {

If (!/Invalid|NaN/.test(new

Date(value))) {return new Date(value) > newDate($(params).val());

}

return

isNaN(value) && isNaN($(params).val()) || (parseFloat(value) > parseFloat($(params).val()));},'Must be greater than {0}.');

$("#datePicker").rules('add', { greaterThan: "#date");


Thursday, October 27, 2011 6:45 PM

Put this in a view:

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm("YourAction", "YourController", FormMethod.Post, new { id = "formSubmit" }))
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Something</legend>

        @Html.TextBox("numberFrom", "", new { @class = "startDate" })
        @Html.TextBox("numberTo", "", new { @class = "endDate" })
               <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

<script type="text/javascript">
    $(document).ready(function () {

        $(document).ready(function () {
            $.validator.addMethod("endDate", function (value, element) {
                var startDate = $('.startDate').val();
                return Date.parse(startDate) <= Date.parse(value) || value == "";
            }, "* End date must be after start date");
            $('#formId').validate();
        });
    });

</script>

The date must be in a format YYYY/MM/DD so put 2011/10/10 and 2011/09/10 and try to submit. This works. Also use jqueryui for a fancier solution and you can set the date format. Regards.


Friday, October 28, 2011 11:53 AM

Hi, i added this to my page and it was ok but didnt get Error meaage shown except field is highlighted with red...

and also in the same page i have cascading dropdowns and javascript related to it.. they seemed to be not working if i add this one.

Please help..


Saturday, October 29, 2011 6:54 AM

HI,

    i have two date pickers one for from date and other for to date.. i need to validate them to make sure To date id not in the past than From date.

Please help me.

 

 

http://forums.asp.net/t/1701607.aspx/1