html validate input time minimum dependent on the other

Question

I will describe the situation from scratch so that there is no clarity in the later stages.

I have Razor/c# code in .cshtml file

it generates table for me

  @for (int nr_rows = 0; nr_rows < 31; nr_rows++)
                {
                    var nr_names = nr_rows + 1;              

                        @for (int nr_columns = 0; nr_columns < 18; nr_columns++)
                        {
                            if (nr_columns == 2)
                            {
                                <td id="td01"><input class="InputsForUser" type="time" name="start_@nr_names" id="id_start_@nr_names" /></td>
                            }
                            if (nr_columns == 3)
                            {
                                <td id="td01"><input class="InputsForUser" type="time" name="end_@nr_names" id="id_end_@nr_names" /></td>
                            }

                        }
                }

which generates for me html in the browser (interprets in this way)

// ----------------------------------- Day 1
<input class="InputsForUser" type="time" name="start_1" id="id_start_1">
<input class="InputsForUser" type="time" name="end_1" id="id_end"_1>

// ----------------------------------- Day 2
<input class="InputsForUser" type="time" name="start_2" id="id_start_2">
<input class="InputsForUser" type="time" name="end_2" id="id_end_2">

// (...)

// ----------------------------------- Day 31
<input class="InputsForUser" type="time" name="start_31" id="id_start_31">
<input class="InputsForUser" type="time" name="end_31" id="id__end_31">

I am trying to make id = end at least equal to id = start, but I have no idea, please help

for example: if I enter 12:00 at the start, I cannot enter 11:50 at the end

score 0 · Answer 1 · answered Jan 11 '20 at 21:30

0

you can install jquery validate and use

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()) 
        || (Number(value) > Number($(params).val())); 
},'Must be greater than {0}.');

then you can use the rule like this :

$("#id_end_1").rules('add', { greaterThan: "#id_start_1" });

original answer : Validate that end date is greater than start date with jQuery

answered Jan 11 '20 at 21:30

Moussaabmma

78
1
1
8

Uncaught TypeError: Cannot read property 'addMethod' of undefined – Jan 12 '20 at 17:29
@blackWizard did you install jquery validator in your project https://jqueryvalidation.org/ you can find in in nuget package manager in your visual studio. and make sure refer the plugin in your page or your layout page – Moussaabmma Jan 12 '20 at 21:55

A. Meshu · Answer 2 · 2020-01-12T14:22:19.920

You can use regex selector for the name (since it start the same), and then change the minimum value of the next element like that:

var startInput = document.querySelectorAll('[name^=start]'); // regex selector for all start time input.
for (var i=0; i < startInput.length; i++) { // iterate them and,
  startInput[i].addEventListener('change', function() { // if start time got some input:
    if (this && this.nextElementSibling) { // check that exist and then
      this.nextElementSibling.setAttribute('min', this.value); // set the minimum value of the end time that follow it
    }
  });
}

<input class="InputsForUser" type="time" name="start_31" id="id_start_31">
<input class="InputsForUser" type="time" name="end_31" id="id__end_31">

this.nextElementSibling.setAttribute('min', this.value); // set the minimum value of the end time that follow it }); ---- Uncaught TypeError: Cannot read property 'setAttribute' of null at HTMLInputElement. — , Jan 12 '20 at 08:44

html validate input time minimum dependent on the other

2 Answers2