How to make sure that each input field has a greater value than the value of the previous input?

Question

How to make sure that each field has a greater value than the value of the previous input? If the condition is true, then I can submit the form.

$('#add').on('click', function() {
    $('#box').append('<div id="p1"><input required type="number" min="1" max="120" name="val" ></div>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="add" href="javascript:void(0);">Add </a>
<form>
   <div id="box"></div>
   <input type="submit" value="Submit">
</form>

Run codeHide result

Answer 1

You need to go through all inputs, keeping the value of the previous one in order to compare it. Keep in mind that your current “add input” code will give all inputs the same name, making it harder to use the actions on your page. You can use an array for this.

$("#add").on("click", function() {
    $("#box").append('<div id="p1"><input required type="number" min="1" max="120" name="val[]" ></div>');    
});
$("form").submit(function(e) {
    return higherThanBefore(); //send depending on validation
});
function higherThanBefore() {
    var lastValue = null;
    var valid = true;
    $("input[name^=val]").each(function() {
        var val = $(this).val();
        if (lastValue !== null && lastValue >= val) { // not higher than before, not valid
            valid = false;
        }
        lastValue = val;
    });
    return valid; // if we got here, it valid
}

<a id="add" href="javascript:void(0);">Add </a>
<form action="test">
   <div id="box"></div>

   <input type="submit" value="Submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Run codeHide result

Answer 2

, . .

$('#add').on('click', function() {
  // get the current last input, save its value.
  //  This will be used as the min value for the new el
  var newMin = $("#box").find(".p1 input").last().val() || 1;
  // Append the new div, but set the min value to the
  //  value we just saved.
  $('#box').append('<div class="p1"><input required type="number" min="'+newMin+'" max="120" name="val" ></div>');

$(".p1 input").on("keyup mouseup", function(){
  var triggeringEl = $(this);
  if (triggeringEl.val() >= triggeringEl.attr("min") ) {
    triggeringEl.removeClass("error");
  }
  triggeringEl.parent().nextAll(".p1").children("input").each(function(){
    if($(this).attr("min") < triggeringEl.val() )
       $(this).attr("min", triggeringEl.val() );
       
    if ($(this).val() < $(this).attr("min")){
      $(this).addClass("error");
    } else {
      $(this).removeClass("error");
    }
  })
})  
});

.error {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="add" href="javascript:void(0);">Add </a>
<form>
   <div id="box"></div>
   <input type="submit" value="Submit">
</form>

Hide result

, , ( , ), . el, . , el , , el , , . ...

, , , . . , (?) . , , , , , . , , , .

Answer 3

. filter(): , , .

$('#add').on('click', function() {
    var idx = $('#box').find('div[id^=p]').length;
    $('#box').append('<div id="p' + idx + '"><input required type="number" min="1" max="120" name="val' + idx + '" ></div>');
});
$('form').on('submit', function(e) {
    var cachedValues = $('form [type=number]');
    var noOrderRespected = cachedValues.filter(function(idx, ele) {
        var nvalue = cachedValues.eq(idx + 1).val();
        return  (+ele.value < (+nvalue||+ele.value+1)) ? false : true;
    }).length;
    console.log('noOrderRespected: ' + noOrderRespected);
    if (noOrderRespected > 0) {
        e.preventDefault();
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<a id="add" href="javascript:void(0);">Add </a>
<form>
    <div id="box"></div>
    <input type="submit" value="Submit">
</form>

Hide result