0 レビュー
1 回答
php-送信時のJavascriptユーザーの入力検証
HTML：
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="POST">
<form name="#" method="POST" onsubmit="return validateForm();">
<table>
<tr>
<td>Select Warehouse:</td>
<td><input type="text" id="W_ID" name="W_ID" placeholder="numbers only"></td>
<span class="invalid-feedback"><?php echo $warehouse_err; ?></span>
</tr>
<tr>
<td>Select District:</td>
<td><input type="text" id="D_ID" name="D_ID" placeholder="numbers only"></td>
<span class="invalid-feedback"><?php echo $district_err; ?></span>
</tr>
<tr>
<td>Select Customer:</td>
<td><input type="text" id="C_ID" name="C_ID" placeholder="numbers only"></td>
<span class="invalid-feedback"><?php echo $customer_err; ?></span>
</tr>
</table>そこで、W_ID、C_ID、D_IDに対するユーザーの入力を検証しようとしました。たとえば、ユーザー入力がいくつかの文字列である場合、送信する前にエラーメッセージを返します。この.phpファイルにいくつかのJavascriptコードを記述しましたが、動作させることができませんでした。以下のJSコードを参照してください。
Javascript：
<script>
function validateForm(){
var W_ID = document.getElementById("W_ID").value;
var D_ID = document.getElementById("D_ID").value;
var C_ID = document.getElementById("C_ID").value;
var numbers = /^[0-9]+$/;
//check if input is number
if(!(W_ID.value.match(numbers) {
alert('Please only enter numbers.');
}
else if(!(D_ID.value.match(numbers) {
alert('Please only enter numbers.');
}
else if(!(C_ID.value.match(numbers) {
alert('Please only enter numbers.');
}else {
alert('Successfully! form has been submitted.');
}
</script>また、PHP内でJSコードをラップするにはどうすればよいですか？どうもありがとう！私は長い間立ち往生しています
わからない
0
レビュー
答え :
解決：
「フォームには他のフォーム要素を含めることはできません。」
<form>タグを使用する必要はありません。
フォームにIDを指定するだけで、JavaScriptで送信イベントを処理できます。
<form
id="myForm"
action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>"
method="POST"
>
<table>
<tr>
<td>Select Warehouse:</td>
<td>
<input
type="text"
id="W_ID"
name="W_ID"
placeholder="numbers only"
/>
</td>
<span class="invalid-feedback"><?php echo $warehouse_err; ?></span>
</tr>
<tr>
<td>Select District:</td>
<td>
<input
type="text"
id="D_ID"
name="D_ID"
placeholder="numbers only"
/>
</td>
<span class="invalid-feedback"><?php echo $district_err; ?></span>
</tr>
<tr>
<td>Select Customer:</td>
<td>
<input
type="text"
id="C_ID"
name="C_ID"
placeholder="numbers only"
/>
</td>
<span class="invalid-feedback"><?php echo $customer_err; ?></span>
</tr>
</table>
<button type="submit">Submit</button>
</form>スクリプトは次のようになります。
var form = document.getElementById("myForm");
form.addEventListener("submit", function (e) {
e.preventDefault();
var target = e.target;
var formData = new FormData(target);
var data = Object.fromEntries(formData.entries());
var regex = /^[0-9]+$/;
if (
!data.W_ID.match(regex) ||
!data.D_ID.match(regex) ||
!data.C_ID.match(regex)
) {
alert("Only numbers accepted.");
} else {
// Continue form submittion.
this.submit();
}
});https://codesandbox.io/s/keen-galileo-tvznl?file=/script.js:0-439
わからない
同様の質問
私たちのウェブサイトで同様の質問で答えを見つけてください。