Creating a custom validation comparing 2 input fields using JavaScript

Posted 1 month ago by Patwan

I have got 2 date input fields (one for departure date and the next for return date) in my form and want to create a custom JavaScript/Jquery logical validation which compares the values from the 2 input fields and make sure the value of the departure date is the current date the user fills the form or any date in the future while the return date value must be after the departure date.

Am stuck while creating the Js code

~ Kindly assist?

<!-- Departure date-->
        <div class="form-line registar2 love {{ $errors->has('departure_date') ? ' has-error' : '' }}">
                 <input type="date" class="form-input" id="depart" name="departure_date" value="{{ old('departure_date') }}" required>

                 <label>Departure Date *</label>
                <div class="error-label">Field is required!</div>
                <div class="check-label"></div>
                  @if ($errors->has('departure_date'))
                    <span class="help-block">
                      <strong>{{ $errors->first('departure_date') }}</strong>
                    </span>
                  @endif
        </div>
    <!--End departure-->

    <!-- Return date-->
        <div class="form-line registar2 move {{ $errors->has('return_date') ? ' has-error' : '' }}">
                 <input type="date" class="form-input" id="return" name="return_date" value="{{ old('return_date') }}" required>

                 <label>Return Date *</label>
                <div class="error-label">Field is required!</div>
                <div class="check-label"></div>
                  @if ($errors->has('return_date'))
                    <span class="help-block">
                      <strong>{{ $errors->first('return_date') }}</strong>
                    </span>
                  @endif
        </div>
    <!-- End return date-->


Jquery code

     $('.departure_date').on('change', function () {
        $('.return_date').val('');
        var depart_date = $(this).val();
        var departdate = new Date(depart_date);
        var currdate = new Date();
        var diff = (departdate - currdate)
        var days = diff / (1000 * 60 * 60 * 24);
    });

Please sign in or create an account to participate in this conversation.

Laracasts Mascot

Hi, Have We Met Yet?

Did you know that, in addition to the forum, Laracasts includes well over 1000 lessons on modern web development? All for the price of one lunch out per month.

Sign Me Up

Channels

Reply to

Use Markdown with GitHub-flavored code blocks.