Question

我创建了一个表格，其中有2 input type=number。两个输入都必须由下面的数字填充，在min和max属性中给出的范围之间或之外，可能有也可能没有十进制数。如果数字将低于min范围，那么文字颜色将变为 ORANGE ，如果它高于max范围，它将变为 RED ，如果输入值中的数字与范围匹配绿色，则所有这些验证都将由 jQuery 完成。

问题：我需要提交myForm，但由于min＆amp; max属性我收到此提示＆＃34;值必须小于或等于20＆＃34;或＆＃34;值必须大于或等于10＆＃34;对于提交的输入分别小于或大于min和max属性中提供的范围，因此我的表单不会被提交。任何人都可以告诉我哪里可能出错或是否有相同的解决方案。

链接到代码：的 JSFIDDLE

或

请查看下面的代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

浏览器使用min和max属性来执行表单验证。如果您想使用它们来确定jQuery行为但是由于值无效而希望跳过浏览器阻止表单提交，请将它们存储为data-属性并使用.attr()或.data()方法读取它们jQuery，例如：

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

...或：

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

另外，看着你的代码，我意识到你是：

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

基于您的逻辑的保护条款示例：

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>

Answer 2

如果输入字段中的值不在范围内，则无法提交表单。在您的情况下，您可以更改HTML

MyException.GetObjectData

到

AppDomain

等等。在JS中：

min="10"

Answer 3

您可以使用data-min和data-max属性跳过验证错误，并且上述代码中未指定操作URL。所以可能没有提交该表格的bcoz。

避免最小和最大属性的范围错误＆amp;强制提交表单

3 个答案: