0

メールを送信する前に、クエリ検証を使用して、ユーザーがすべてのテキスト フィールドに入力したことを確認しています。ここに私のフォームHTMLがあります:

<form class="email-form" action="php/email.php" method="POST" id="emailForm"> <br />
            <input type="text" class="required" placeholder="Your Name" /> <br />
            <input type="text" class="required" placeholder="Your Email" /> <br />
            <input type="text" class="required" placeholder="Subject" /><br />
            <textarea rows="10" class="required" ></textarea><br />
            <input type="submit" class="btn btn-primary required" />
</form>

そして私のjQuery：

$(function() {
    $('#emailForm').validate();
});

次に、ページにアクセスしてテキストを入力せずにフォームを送信すると、最初のテキスト ボックスにのみエラー メッセージが添付されます。最初のテキスト ボックスに入力すると、フォームは問題なく送信されます。誰かが私を助けることができますか？ありがとう

4

2 に答える 2

3

各入力には属性が含まれている必要nameがあります。含まれていないと、jQueryValidateプラグインが正しく機能しません。

それ以外の場合は、class="required"各要素内で使用しても問題はありません。

代わりにこれを試してください：

HTML：

<form class="email-form" action="php/email.php" method="POST" id="emailForm"> <br />
    <input type="text" name="yourname" class="required" placeholder="Your Name" /> <br />
    <input type="text" name="youremail" class="required" placeholder="Your Email" /> <br />
    <input type="text" name="subject" class="required" placeholder="Subject" /><br />
    <textarea rows="10" name="description" class="required" ></textarea><br />
    <input type="submit" class="btn btn-primary required" />
</form>

jQuery：

$(function() {
    $('#emailForm').validate();
});

動作中のデモ：http ： //jsfiddle.net/xSwfD/

于 2013-03-13T04:17:14.070 に答える
1

最初のものを削除してclass=required、何が起こるか見てみましょう。フォームは今すぐメールで検証されます。これを行う方法は、htmlで一意の名前を付けることです。さらにカスタマイズするための柔軟性が増すため、この方法を好みます。

<form class="email-form" action="php/email.php" method="POST" id="emailForm"> <br />
    <input type="text" name="name" placeholder="Your Name" /> <br />
    <input type="text" name="email" placeholder="Your Email" /> <br />
    <input type="text" name="subject" placeholder="Subject" /><br />
    <textarea rows="10" class="required small" ></textarea><br />
    <input type="submit" class="btn btn-primary" />
</form>

$(function() {

    $('#emailForm').validate({
           rules: {
                   name: "required",
                   email: "required",
                   subject: "required",
           }
   });

});

これを使用すると、メッセージやその他のフィールドを使用して、あらゆる種類のファンシーを得ることができます。この優れたチュートリアルを参照してください。

私が遊んでいたフィドル。

于 2013-03-13T03:34:01.010 に答える