-1

検証を使用して単純なフォームを作成していて、空の入力またはテキストエリアにクラスを追加したいのですが、空の入力をチェックする方法がわかりません。

現在、すべての入力に追加されます。空の入力/テキストエリアが欲しいだけです。誰でも助けることができますか？

HTML:

<form id="contactform">
    <input type="text" id="name" placeholder="name" autofocus >
    <input placeholder="email" >
    <textarea placeholder="message" ></textarea>
    <input type="submit">
    </input>
</form>

jQuery:

$(function () {
    $("#contactform").submit(function () {
        if($("input, textarea").val() === ""){
        $("input").addClass("error");   
        return false;
        }
        $("input").removeClass("error");
    });
});
4

4 に答える 4

4

これを試して：

 $("#contactform").submit(function (e) {
     e.preventDefault();
     $(":input").not("[type=submit]").removeClass('error').each(function () {
         if ($.trim($(this).val()).length == 0) $(this).addClass('error');
     });
 });

jFiddle の例

(preventDefault があることに注意してください。フォームは送信されず、動作することがわかります)

于 2013-03-18T21:01:21.467 に答える
0

.val()数値を返すのではなく、文字列を返します。だからに変更$("input, textarea").val() == 0します$("input, textarea").val() === ""

編集

コメントのとおり、空のフィールドのテストをもう少し包括的にするために、

$("input, textarea").each(function(){
    var self = $(this),
        thisVal = self.val();
    if($.trim(thisVal) === "" || thisVal.length === 0)
    {
        self.addClass("error");
    }
});
于 2013-03-18T20:52:58.667 に答える
0

実際に後でフォームを送信したい場合（受け入れられた回答を採用）。これを試して：

$("#submit_form").click(function () {
$submit = "yes";
$(":input").not("[type=button]").removeClass('error').each(function () {
    if ($.trim($(this).val()).length == 0) {
        $(this).addClass('error');
        $submit = "no";
    }
});
if ($submit == "yes") {
    $("#contactform").submit();
}
});

これはそれぞれを通過し、コンテンツが含まれていることを確認し、含まれていない場合はフォームを送信できません。それ以外の場合、フォームは送信されます。また、送信ボタンを代わりにボタンに変更しました。それはから行きました：

 <input type="submit">

ボタンで送信するには:

 <input type="button" id="submit_form" value="Submit" />
于 2013-03-18T20:54:34.217 に答える