Question

如何确保每个字段的值都大于以前输入的值？如果条件为真，那么我可以提交表格。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

你需要循环遍历所有input，保持前一个的值来比较它。请记住，您当前的＆＃34;添加输入＆＃34;代码将为所有输入提供相同的名称，这将使您在操作页面上使用时出现问题。你可以使用一个数组。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

所以我做了改动，以反映评论（顺便提一下），但这里有一个挑战。如果我在当前el的值改变时设置最小值，那么效果很好。但我不能假设当前el是集合中的最高值，所以如果当前el正在递减，我还没有想出减少所有后续最小值的逻辑。叹息...

无论如何，创建新输入并设置最小值的部分保持不变。然后我不得不添加一个监听器来处理对输入的更改。如果通过键盘或鼠标更改输入，则会根据此值检查所有后续最小值（最小值？）。将较低的值设置为此值，然后检查所有元素，最小值与值，并根据需要设置错误信号。仍然需要工作，因为我无法计算如何处理递减值，但这是一个开始。

Answer 3

您可以使用.filter()：对于每个输入字段，您可以测试下一个输入字段的值是否大于当前值。

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何确保每个输入字段的值大于先前输入的值？

3 个答案: