Javascript：フォームに入力初期値

未満の値のみを許可し、十進数の値が事前入力されたテキスト入力フィールドが多数あるため、フォームを送信する前に値を編集できます。Javascript：フォームに入力初期値

javascript/jqueryを使用していて、各入力で初期値よりも小さい値しか使用できないのかどうか疑問に思っていました。

私はかなり挑戦的だと思ったので、ここに投稿することを考えました。ありがとう皆さん

2016-12-22 PaxBin

それは、単一の要素を更新するためですか？ – aldrin27

単一の要素を更新することによって何を意味するのか分かりません;/ – PaxBin

クライアント側で検証することはできません。私はフォームを偽造して提出することができました。クライアント側のチェックをバイパスします。サーバー側で重大な検証を行う必要があります。ちょうど回っているとき、これは大きな懸念ではありません。クライアントからのデータを信頼できないことが分かります。 – Carcigenicate

jQuery Validation pluginのmax methodを使用してください。

例：

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Makes "field" required and 23 or smaller.</title> 
<link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-demos.css"> 

</head> 
<body> 
<form id="myform"> 
<label for="field">Required, maximum value 23: </label> 
<input type="text" class="left" id="field" name="field"> 
<br/> 
<input type="submit" value="Validate!"> 
</form> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script> 
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script> 
<script> 
// just for the demos, avoids form submit 
jQuery.validator.setDefaults({ 
    debug: true, 
    success: "valid" 
}); 
$("#myform").validate({ 
    rules: { 
    field: { 
     required: true, 
     max: $('your_input_selector').val() 
    } 
    } 
}); 
</script> 
</body> 
</html>

出典

2016-12-22 02:16:51

私の場合、@DucFilanの回答に感謝します。入力配列を使用しています。セレクタをどのように適応させることができますか？ – PaxBin

セレクタには依存しません。 –

これはあなたを助けることがあります。

var initialValue = $("#myTextbox1").val() 
 
$("#myTextbox1").on("input", function() { 
 
    if($("#myTextbox1").val() > initialValue) { 
 
     $("#myTextbox1").val(initialValue); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="myTextbox1" type="text" value="5"/>

出典

2016-12-22 02:22:58 user5195185

比較する前に数値を数値に変換する必要があります。 – Barmar

フォームで入力を使用している場合は、デフォルトのフォームアクションを取り消すためにイベントでデフォルトを禁止する必要があります。 –

をこのソリューションには、入力値ならば、デフォルトのフォームアクション、チェックを防ぎ、数への入力を変換し、数値であり、それがユーザに警告し、デフォルト入力値をリセットした場合、新しい値がorigよりも小さいかどうかを調べるそれが元の値にリセットされます。

HTML

<form id="myForm" action=""> 
    <input type="text" id="myValue" value="5" /> 
    <input type="button" id="myButton" value="validate" /> 
</form>

はJavaScript

var origVal = $('#myValue').val(); 

$('#myButton').on('click', function(e) { 
     var getVal = Number($('#myValue').val()); 
     e.preventDefault(); 

     if (isNaN(getVal) === true) { 
      alert('The input value has to be a number.'); 
      $('#myValue').val(origVal); 
     } 

     if (getVal > origVal) { 
      alert('The input value has to be less than the original value of ' + origVal); 
      $('#myValue').val(origVal); 
     } 
    });

出典

2016-12-22 05:08:58

Javascript：フォームに入力初期値

答えて

関連する問題