javascript - 如何确保每个输入字段的值都大于前一个输入的值？

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，保留前一个的值以进行比较。请记住，您当前的“添加输入”代码将为所有输入赋予相同的名称，这将导致在您的操作页面上使用时出现问题。您可以为此使用一个数组。

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