php - 避免最小和最大属性的范围错误并强制提交表单

Question

我创建了一个表单，其中有 2 个 input type=number .两个输入都必须填写以下数字，介于或超出 min 中给出的范围和 max提供的属性可能有也可能没有十进制数。如果数字将低于 min range 然后文本颜色将变为 ORANGE，如果它高于 max range 它将变成RED，如果输入值中的数字与范围匹配，它将变成GREEN，所有这些验证将由 jQuery 完成。 .

ISSUE 这里是我需要提交 myForm但因为min & max attribute 对于提交小于或大于 min 中提供的范围的输入，我收到此提示“值必须小于或等于 20”或“值必须大于或等于 10”和 max属性，因此我的表单没有提交。 谁能告诉我我可能哪里出错了，或者是否有任何解决方案。

代码链接: <强> JSFIDDLE

或

请检查下面的代码段:

$(document).ready(function()
{
    $("#weight").keyup(function()
    {
        var max = parseInt($('#weight').attr('max'));
        var min = parseInt($('#weight').attr('min'));
        if ($("#weight").val() >= min)
        {
            if ($("#weight").val() <= max)
            {
                $("#weight").css("color", "green");
            }
            else
            {
                $("#weight").css("color", "red");
            }
        }
        else
        {
            $("#weight").css("color", "orange");
        }
    });
});




$(document).ready(function()
{
    $("#bmi").keyup(function()
    {
        var max = parseInt($('#bmi').attr('max'));
        var min = parseInt($('#bmi').attr('min'));
        if ($("#bmi").val() >= min)
        {
            if ($("#bmi").val() <= max)
            {
                $("#bmi").css("color", "green");
            }
            else
            {
                $("#bmi").css("color", "red");
            }
        }
        else
        {
            $("#bmi").css("color", "orange");
        }
    });
});

$(document).ready(function()
{
    $('input').on('keypress', function(e)
    {
        if (e.which == 13)
        {
            switch ($(this).attr('id'))
            {
                case 'weight':
                $('#bmi').focus();
                e.preventDefault();
                break;

                case 'bmi':
                $('#body_fat').focus();
                e.preventDefault();
                break;

                case 'body_fat':
                $('#submit').focus();
                e.preventDefault();
                break;
            }
        }
    });
});

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button
{
    -webkit-appearance: none; 
    margin: 0; 
}
.newdatatext
{
	height:60px;
	width:100%;
	text-align:center;
	font-weight:bold;
	font-size:300%;
}
#usernewdetailsform
{
	margin-top:6%;
width:100%;
}
#usernewdetailsform label
{
    font-weight:bold;
	font-size:30px;
}

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

<form name="myForm" action="" method="POST">
    <label for="weight">Weight :</label>
    <input type="number" name="weight" id="weight" class="newdatatext" placeholder="Weight" min="10" max="20" step=".01" autofocus required>

    <label for="bmi">BMI</label>
    <input type="number" name="bmi" placeholder="BMI" min="10" max="20" id="bmi" step=".01"  class="newdatatext" required>
    <input type="submit" name="submit" id="submit">
</form>

Answer 1

浏览器使用 min 和 max 属性来执行表单验证。如果您想使用它们来确定 jQuery 行为，但又想跳过浏览器因无效值而阻塞的表单提交，请将它们存储为 data- 属性并使用 .attr() 或 .data() jQuery 方法，例如:

var max = parseInt($('#weight').attr('data-max'));

...或者:

var max = parseInt($('#weight').data('max'));

此外，查看您的代码我意识到您是:

1. 使用多个 DOM 就绪回调。你只需要一个，你可以把所有的逻辑都放在里面。
2. 对多个输入元素重复相同的逻辑。您始终可以利用事件的上下文，使用 $(this) 来引用触发它的 jQuery 对象。
3. 包含难以阅读的嵌套条件语句。您可以使用保护子句分别分配颜色，例如:

基于您的逻辑的保护子句示例:

var val = $(this).val();

if (val < min) {
  $(this).css('color', 'orange');
  return;
}

if (val > max) {
  $(this).css('color', 'red');
  return;
}

$(this).css('color', 'green');

---

这是一个更新的例子:

$(document).ready(function()
{
    $("#weight, #bmi").keyup(function()
    {
        // Cache DOM node, min/max values, and input value
        var $t = $(this);
        var max = parseInt($t.attr('data-max'));
        var min = parseInt($t.attr('data-min'));
        var val = $t.val();
        
        // Use guard clauses
        if (val < min) {
          $t.css('color', 'orange');
          return;
        }
        
        if (val > max) {
          $t.css('color', 'red');
          return;
        }
        
        $t.css('color', 'green');
    });

    $('input').on('keypress', function(e)
    {
        if (e.which == 13)
        {
            switch ($(this).attr('id'))
            {
                case 'weight':
                $('#bmi').focus();
                e.preventDefault();
                break;

                case 'bmi':
                $('#body_fat').focus();
                e.preventDefault();
                break;

                case 'body_fat':
                $('#submit').focus();
                e.preventDefault();
                break;
            }
        }
    });
});

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button
{
    -webkit-appearance: none; 
    margin: 0; 
}
.newdatatext
{
	height:60px;
	width:100%;
	text-align:center;
	font-weight:bold;
	font-size:300%;
}
#usernewdetailsform
{
	margin-top:6%;
width:100%;
}
#usernewdetailsform label
{
    font-weight:bold;
	font-size:30px;
}

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

<form name="myForm" action="" method="POST">
    <label for="weight">Weight :</label>
    <input type="number" name="weight" id="weight" class="newdatatext" placeholder="Weight" data-min="10" data-max="20" step=".01" autofocus required>

    <label for="bmi">BMI</label>
    <input type="number" name="bmi" placeholder="BMI" data-min="10" data-max="20" id="bmi" step=".01"  class="newdatatext" required>
    <input type="submit" name="submit" id="submit">
</form>