datepicker第一次加载不起作用，jQuery

Question

I am working with datepicker jquery for 2 input "from" and "to" filter. I want to make it required if one of the filters (from/to) has been selected. And if the user doesn't want to use the date filter, I want to remove the required attribute.

However, after I select a date in my "from" input, the action is not affected on first submit. Somehow the "from" input didn't recognize value from datepicker on the first load.

Anyone know why it can't work on the first submit?

here is the code for jquery:

$(document).ready(function () {
    if ($('#to').val().length == 0 && $('#from').val().length == 0) {
        $('#from').removeAttr('required');
        $('#to').removeAttr('required');
    }
    else if ($('#to').val().length > 0 ) {
        $('#from').attr('required');
    }
    else if ($('#from').val().length > 0) {
        $('#to').attr('required');
    }
});

for the input from and to, I set it required by default.

 @Html.TextBoxFor(modelitem => Model.startdate, new { @class = "datepicker form-control" ,@placeholder = "Select From Date" , @id="from" , @required = "required" })

 @Html.TextBoxFor(modelitem => Model.finishdate, new { @class = "datepicker form-control", @placeholder = "Select To Date" , @id = "to" , @required = "required" })

Please let me know the problem!

Answer 1

try to remove it inside the document .ready function like

<script>
     if ($('#to').val().length == 0 && $('#from').val().length == 0) {
        $('#from').removeAttr('required');
        $('#to').removeAttr('required');
    }
    else if ($('#to').val().length > 0 ) {
        $('#from').attr('required');
    }
    else if ($('#from').val().length > 0) {
        $('#to').attr('required');
    }
</script>

or use:

Alert("this is want to know on first run")

inside your if else statement

Addition to: Right click the page = > console menu on first run and check some errors or any jquery is running or not.