Jquery获取最近类的未定义值

Question

I am trying to do validation comparing a pair of datetime values. I created a dynamic form by which everytime user click on the "Add Session" button. A session form div will be appended. For eg, I am trying to add 2 sessions and validate 2 pairs of session datetime values with the codes below.

    $('.startdatetime').each(function(){
        console.log($(this).val());
        console.log($(this).closest('.datetime-div').next().find('.enddatetime').val());
        if($(this).val() === "" || $(this).val() === null ){
            $(this).closest('.startdatetime-input').after("<p class='error-message font-bold col-pink'>Start Date Time is required.<p>");
            hasErr = true;
        }else if(moment($(this).val()).isSameOrAfter($(this).closest('.datetime-div').next().find('.enddatetime').val(), 'minute')){ //validate start datetime < end datetime
            $(this).closest('.startdatetime-input').after("<p class='error-message font-bold col-pink'>Invalid Date Time.<p>");
            hasErr = true;
        }
    });

I am getting undefined value for the first session end datetime in first loop which I am debugging using console.log.

Codes below show my html snippet.

              <div class="row">
                <div class="datetime-div col-md-6 col-xs-12 col-sm-12">
                    <div class="form-group">
                        <div class="form-line startdatetime-input">
                            <label>Start Date Time</label>
                            <input type="text" class="datetimepicker form-control startdatetime" placeholder="Please choose date & time...">
                        </div>
                    </div>                    
                </div>
                <div class="datetime-div col-md-6 col-xs-12 col-sm-12">
                    <div class="form-group">
                        <div class="form-line enddatetime-input">
                            <label>End Date Time</label>
                            <input type="text" class="datetimepicker form-control enddatetime" placeholder="Please choose date & time...">
                        </div>
                    </div>                    
                </div>
            </div>

 $('.startdatetime').each(function() { console.log($(this).val()); console.log($(this).closest('.datetime-div').next().find('.enddatetime').val()); if ($(this).val() === "" || $(this).val() === null) { $(this).closest('.startdatetime-input').after("<p class='error-message font-bold col-pink'>Start Date Time is required.<p>"); hasErr = true; } else if (moment($(this).val()).isSameOrAfter($(this).closest('.datetime-div').next().find('.enddatetime').val(), 'minute')) { //validate start datetime < end datetime $(this).closest('.startdatetime-input').after("<p class='error-message font-bold col-pink'>Invalid Date Time.<p>"); hasErr = true; } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="datetime-div col-md-6 col-xs-12 col-sm-12"> <div class="form-group"> <div class="form-line startdatetime-input"> <label>Start Date Time</label> <input type="text" class="datetimepicker form-control startdatetime" placeholder="Please choose date & time..."> </div> </div> </div> <div class="datetime-div col-md-6 col-xs-12 col-sm-12"> <div class="form-group"> <div class="form-line enddatetime-input"> <label>End Date Time</label> <input type="text" class="datetimepicker form-control enddatetime" placeholder="Please choose date & time..."> </div> </div> </div> </div>

Any idea of getting the closest enddatetime value with the most appropriate jQuery selector?

Answer 1

Everything looks fine in your code. You are not getting an undefined , you are getting an empty value because both inputs are empty. If you fill the attribute value , you will get those values printed in the console, run the code snippet I share and check. My changes are in the html input elements. So it seems that you should be running the javascript you shared once the user has filled the inputs, not before like in the code snippet you shared.

 $('.startdatetime').each(function() { console.log($(this).val()); console.log($(this).closest('.datetime-div').next().find('.enddatetime').val()); if ($(this).val() === "" || $(this).val() === null) { $(this).closest('.startdatetime-input').after("<p class='error-message font-bold col-pink'>Start Date Time is required.<p>"); hasErr = true; } else if (moment($(this).val()).isSameOrAfter($(this).closest('.datetime-div').next().find('.enddatetime').val(), 'minute')) { //validate start datetime < end datetime $(this).closest('.startdatetime-input').after("<p class='error-message font-bold col-pink'>Invalid Date Time.<p>"); hasErr = true; } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="datetime-div col-md-6 col-xs-12 col-sm-12"> <div class="form-group"> <div class="form-line startdatetime-input"> <label>Start Date Time</label> <input type="text" value="valueForStartDateTime" class="datetimepicker form-control startdatetime" placeholder="Please choose date & time..."> </div> </div> </div> <div class="datetime-div col-md-6 col-xs-12 col-sm-12"> <div class="form-group"> <div class="form-line enddatetime-input"> <label>End Date Time</label> <input type="text" value="valueForEndDateTime" class="datetimepicker form-control enddatetime" placeholder="Please choose date & time..."> </div> </div> </div> </div>