0
2つのフォームが作成されました。input type=numberです。両方の入力は、付属のminとmax属性で指定された範囲内または範囲外の数値で入力する必要がありますが、これには小数点がある場合とない場合があります。数がmin範囲未満になる場合、それはREDをオンになり、入力値の数が範囲と一致した場合、それはGREEN、これらのすべての電源を入れますmax範囲を超えている場合、テキストの色は、ORANGEに変わります検証はjQueryで行われます。min属性とmax属性の範囲エラーを避けてください。フォームを送信してください。
ISSUEここは「値が20以下でなければなりません」またはのための「値が10以上でなければならない」私はmyFormを提出する必要がありますが、理由はmin & max属性の私はこのヒントを得ることですこの入力フォームが提出されないため、minおよび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
{
\t height:60px;
\t width:100%;
\t text-align:center;
\t font-weight:bold;
\t font-size:300%;
}
#usernewdetailsform
{
\t margin-top:6%;
width:100%;
}
#usernewdetailsform label
{
font-weight:bold;
\t 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>
あなたの入力に「data-min」と「data-max」を加え、それらのデータを変数minとmaxに使用します –