CODEWITHSUNDEEP
javascriptjqueryvalidation
Khirad Zahra
Khirad Zahra

Reputation: 893

How to make sure every input field has greater value than the value of previous input?

How to make sure that every field has greater value than the value of previous input? If condition is true, then I can submit a 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>

Upvotes: 4

Views: 943

Answers (3)

Snowmonkey
Snowmonkey

Reputation: 3761

One line added, one line changed. Simply get the last input's value, and use that as the min value for the new input.

$('#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>

So I made changes, to reflect the comments (great catch, by the way), but there is a challenge here. If I set the minimum value when the current el's value changes, works great. But I can't assume that the current el is the highest value in the collection, so if the current el is being decremented, I haven't figured the logic to decrement all subsequent minimums. Sigh...

At any rate, the section that creates the new input and sets the minimum remains the same. Then I had to add a listener to handle changes to the input. If the input is changed, by either keyboard or mouse, all subsequent minimums (minima?) are checked against this value. Those that are lower are set to this value, and then all elements are checked, minimum vs. value, and an error signal is set if needed. Still needs work, as I can't figure how to handle decrementing a value, but it's a start.

Upvotes: 2

gaetanoM
gaetanoM

Reputation: 42044

You can use .filter(): for each input field you can test if the next one has a value greater then the current one.

$('#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>

Upvotes: 0

ishegg
ishegg

Reputation: 9927

You need to loop through all the inputs, keeping the value of the previous one to compare it. Keep in mind, your current "add input" code will give all the inputs the same name, which will make it problematic to use on your action page. You can use an array for that.

$("#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's 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>

Upvotes: 2

Related Questions