jQueryを使用しているので、入力フィールドが空の場合にのみ送信ボタンをクリックした後にエラーメッセージを表示するにはどうすればよいでしょうか。
コードの下に、私の簡単なフォームに適用する方法を示します。
<form id="myid" name="myid" method="post" action="hook.php">
name : <input type="text" name="name" id="name">
age : <input type="text" name="age" id="age">
<input type="submit" id="submit" name="submit" value="Save" />
</form>
このようなエラーを表示したい
誰かがすでに述べたように、検証にはおそらく外部ライブラリを使用する必要があります。そうは言っても、これはうまくいくようです（JSFiddleを参照）：
var $form = $("#myid"),
$errorMsg = $("<span class='error'>This field is required..!!</span>");
$("#submit").on("click", function () {
// If any field is blank, we don't submit the form
var toReturn = true;
$("input", $form).each(function () {
// If our field is blank
if ($(this).val() == "") {
// Add an error message
if (!$(this).data("error")) {
$(this).data("error", $errorMsg.clone().insertAfter($(this)));
}
toReturn = false;
}
// If the field is not blank
else {
// Remove the error message
if ($(this).data("error")) {
$(this).data("error").remove();
$(this).removeData("error");
}
}
});
return toReturn;
});
event.preventDefault を使用して、デフォルト アクションの発生を停止できます。次に、条件を確認し、条件が満たされない場合はエラーを表示し、そうでない場合はフォームを送信します。
$("#submit").click(function(event) {
event.preventDefault();
if($(this).val().length === 0) {
// display some error
} else {
$("#myid").submit();
}
});
フォームの検証にいくつかのフレームワークを使用することをお勧めします。それは一般的なタスクであり、すでに 100000 回前に行われているからです。ParsleyやJquery pluginなど、たくさんありますが、「javascript form validation」をグーグルで検索するだけで、シンプルで保守が容易なプラグインが他にもたくさんあります。
その場合、カスタム コードよりも実装済みのコードの方が優れている理由: 1) 既に記述、テスト、および動作している、2) 単一の検証のみが必要になることはほとんどなく、実際に複数のパラメーターのフォームを検証することは困難であり、大きな問題につながる可能性があります。検証コードの量 3) フレームワークは DRYer であり、実際には他にも多くのものがあります。
また、さまざまなフィールドに対してさらに検証が必要なため、検証フレームワークを使用することをお勧めします。最も信頼性の高い検証フレームワークである MooTools Floor を使用します。 MooTool フロア
required='required'input タグでHTML5 オプションを使用できます...