2

私は次のフォームを持っています：

ここに画像の説明を入力してください

検証するのは簡単なようですが、今ではいくつかの条件があります。

  • 少なくとも1行のname入力emailを完了する必要があります（ [完了form]ボタンを押したときに空にすることはできません）。

  • ユーザーが入力の1、2、またはすべての行を完了する場合、[完了]ボタンを押したときにユーザーが完了した行を検証する必要があります。nameemailform

（知っておくと、検証は[完了]ボタンが押されたときに実行されます。そのため、ライブ検証を削除しました。投稿の最後にあるjsFiddleテンプレートリンクのコードの最初の行を確認してください）。

さて、これを達成するための私の最初のアイデアは、どのname入力にテキストがあるかを検出することでした。

name次に、入力をテキストでキャプチャし、jQuery.validateインスタンスを作成して、それらの名前emailも入力で検証します。

問題は、ユーザーが完了した行を検証するだけjQuery.validateの自分のを宣言する方法がわからないことです。formユーザーが任意の順序で行を完了し、いつでもそれらをクリアできることを考えると、実行するのは難しいようです。これは、検証を変更し、以前のエラーメッセージを表示しないようにする必要があることを意味します。

これは私が今までに得たものです：jsFiddleの例ですjQuery.validateが、厄介なようです。この種のform検証を実現する方法があるかどうかを知っておくとよいでしょう。

（自分が何をしようとしているのかはっきりしていないかどうかはわかりませんが、何かはっきりしていない場合は、コメントして質問してください）。

誰かが助けたい場合は、このテンプレートを作成しました。

jsFiddleテンプレート

知っておくと、html変更することができます。また、別の方法やプラグインを知っている場合は、それを提案してください。

前もって感謝します。

4

1 に答える 1

0

HTML部分を修正することから始めました。クラスを追加しましたが、さらに重要なことは、入力にデータセットを追加したことです。

<form id="inviteForm" action="" method="POST">
    <table>
        <tr class="sets set-1">
            <td>Name: <input data-set="1" class="input-name" name="name_1" type="text" value=""/></td>
            <td>E-mail: <input data-set="1" class="input-email" name="email_1" type="text" value=""/></td>
        </tr>
        <tr class="sets set-2">
            <td>Name: <input data-set="2" class="input-name" name="name_2" type="text" value=""/></td>
            <td>E-mail: <input data-set="2" class="input-email" name="email_2" type="text" value=""/></td>
        </tr>
        <tr class="sets set-3">
            <td>Name: <input data-set="3" class="input-name" name="name_3" type="text" value=""/></td>
            <td>E-mail: <input data-set="3" class="input-email" name="email_3" type="text" value=""/></td>
        </tr>
        <tr class="sets set-4">
            <td colspan="2"><input type="submit" value="Finish"/></td>
        </tr>
    </table>
</form>​

また、TR にクラスを追加しました。これは便利なテクニックです。$(".sets") ですべての TR を呼び出すか、$(".set-1") で特定の TR を呼び出すことができます。これがなぜ便利なのか、以下で説明します。

次に、ルールのデフォルト変数を宣言しました。

var defaultrules = {
        name: {
            required: true,
            minlength: 2,
            maxlength: 50,
            messages: {
                required: "*",
                minlength: jQuery.format("Min. {0} characters"),
                maxlength: jQuery.format("Max. {0} characters")
            }
        },
        email: {
            required: true,
            email: true,
            minlength: 5,
            maxlength: 150,
            messages: {
                required: "*",
                email: "Invalid format",
                minlength: jQuery.format("Min. {0} characters"),
                maxlength: jQuery.format("Max. {0} characters")
            }
        }
    }

最後に、私は変更のインプットを聞きました。入力が変更されたとき、単純にルールをバリデーションに追加しました

$("#inviteForm input").on("change", function() {
        var ele = $(this);

        // Get the set!
        cur_set = ele.data("set");

        // Is it filled? 
        if (ele.val().length > 0) {
            // Add the rules to the current set, to the corresponding inputs
            $(".set-"+cur_set).find(".input-name").rules('add', defaultrules.name)
            $(".set-"+cur_set).find(".input-email").rules('add', defaultrules.email)
        }
    })

動作中の jsFiddle は次のとおりです: http://jsfiddle.net/maktouch/DC8eJ/1/

于 2012-10-25T02:43:30.863 に答える