0

ブラウザには、required属性を持つフィールドが入力されていない場合に表示される便利なツールチップがあります。

<!DOCTYPE html>
<form action="" method="post" accept-charset="utf-8">
<input type="text" name="name" placeholder="Your full name" required>
<input type="submit" onclick="this.disabled=true;this.value="Submitted...";this.form.submit()">
</form>

オラ・アミーゴ

問題は、ユーザーがフォームを送信するときにこの送信ボタンを無効にして、複数回送信されないようにし、送信後 (必須フィールドが空の場合でも) フォームが送信されることです。ブラウザーが送信前に必須フィールドをチェックするように修正する方法はありますか?

4

1 に答える 1

0

送信ボタンを無効にする前に、必須フィールドが実際に入力されていることを確認する必要があります。

<!DOCTYPE html>
<form action="" method="post" accept-charset="utf-8">
<input type="text" name="name" placeholder="Your full name" required>
<input type="submit" onclick="if (document.getElementsByName('name')[0].value != null) {
                                this.disabled=true;
                                this.value='Submitted...';
                                this.form.submit();
                              }">
</form>

document.querySelectorAll()または、複数の必要なものに使用できます。

<!DOCTYPE html>
<form action="" method="post" accept-charset="utf-8">
<input type="text" name="name" placeholder="Full name" required>
<input type="text" name="name" placeholder="Email address" required>
<input type="text" name="name" placeholder="Phone number">
<input type="submit" onclick="for (x in document.querySelectorAll('input[type=text][required]')) {
                                if (document.querySelectorAll('input[type=text][required]').value != null) {
                                  this.disabled=true;
                                  this.value='Submitted...';
                                  this.form.submit();
                                }
                              }">
</form>
于 2012-07-08T02:40:13.967 に答える