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

Question

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

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

Answer 1

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

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

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（） ：对于每个输入字段，您可以测试下一个输入字段是否具有大于当前值的值。

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