1

私はJSONデータに基づいてフォームウィザードを作成しています。JSONフィードに基づいてフォームを作成しましたが、これは正常に機能しています。次は、jqueryvalidation.jsをコードに組み込む方法です。

ここでJSONの例に基づいてフォームを生成するためにjquery.dfromを使用してい ますhttps://github.com/daffl/jquery.dform

次に、送信する前に、ユーザー入力用に生成されたフォームを検証します。

この生成されたhtmlフォームを検証するにはどうすればよいですか？ありがとう

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>JSOn based form wizard jQuery dForm</title>
    </head>
    <style type="text/css">
        input, label {
            display: block;
            margin-bottom: 5px;
        }
    </style>
    <body>


    <form id="demo-2-form"></form>


    <!-- Load jQuery and the minified plugin -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript" src="dist/jquery.validate.js"></script>
    <script type="text/javascript" src="dist/jquery.dform-1.0.1.js"></script>


    <script type="text/javascript" class="demo" id="demo-2">
    $('#demo-2-form').dform({
        "action":"index.html",
        "method":"post",
        "html":[
            {
                "type":"fieldset",
                "caption":"User information",
                "html":[
                    {
                        "name":"email",
                        "caption":"Email address",
                        "type":"text",
                        "placeholder":"E.g. user@example.com",
                        "validate":{
                            "email":true
                        }
                    },
                    {
                        "name":"password",
                        "caption":"Password",
                        "type":"password",
                        "id":"registration-password",
                        "validate":{
                            "required":true,
                            "minlength":5,
                            "messages":{
                                "required":"Please enter a password",
                                "minlength":"At least {0} characters long"
                            }
                        }
                    },
                    {
                        "name":"password-repeat",
                        "caption":"Repeat password",
                        "type":"password",
                        "validate":{
                            "equalTo":"#registration-password",
                            "messages":{
                                "equalTo":"Please repeat your password"
                            }
                        }
                    },
                    {
                        "type":"radiobuttons",
                        "caption":"Sex",
                        "name":"sex",
                        "class":"labellist",
                        "options":{
                            "f":"Female",
                            "m":"Male"
                        }
                    },
                    {
                        "type":"checkboxes",
                        "name":"test",
                        "caption":"Receive newsletter about",
                        "class":"labellist",
                        "options":{
                            "updates":"Product updates",
                            "errors":{
                                "value":"security",
                                "caption":"Security warnings",
                                "checked":"checked"
                            }
                        }
                    }
                ]
            },
            {
                "type":"fieldset",
                "caption":"Address information",
                "html":[
                    {
                        "name":"name",
                        "caption":"Your name",
                        "type":"text",
                        "placeholder":"E.g. John Doe"
                    },
                    {
                        "name":"address",
                        "caption":"Address",
                        "type":"text",
                        "validate":{ "required":true }
                    },
                    {
                        "name":"zip",
                        "caption":"ZIP code",
                        "type":"text",
                        "size":5,
                        "validate":{ "required":true }
                    },
                    {
                        "name":"city",
                        "caption":"City",
                        "type":"text",
                        "validate":{ "required":true }
                    },
                    {
                        "type":"select",
                        "name":"continent",
                        "caption":"Choose a continent",
                        "options":{
                            "america":"America",
                            "europe":{
                                "selected":"true",
                                "id":"europe-option",
                                "value":"europe",
                                "html":"Europe"
                            },
                            "asia":"Asia",
                            "africa":"Africa",
                            "australia":"Australia"
                        }
                    }
                ]
            },
            {
                "type":"submit",
                "value":"Signup"
            }
        ]
    });
    </script>
    </body>
    </html>
4

1 に答える 1

1

検証のためにこのプラグインを参照していると仮定します。その場合、フォームにクラスを追加して、どのタイプの検証を実行しているかを通知する必要があります。コード例からは、これは目的のライブラリとは異なるように見えますが、実装に関しては同様である必要があります。将来的には、これらのことを必ず指定してください。このような詳細は非常に重要です。

dformプラグインにはコールバックが組み込まれていないため、フォームがページにいつ表示されるかは正確にはわかりません。つまり、フォームですぐに実行される検証プラグインは、コールバックがないため、実装が困難になります。一方、on submitハンドラーをフォームにアタッチするだけで機能する検証プラグインを使用している場合は、Kevin Bが最初のコメントで提案したように、コードに追加の変更を加えることなく呼び出すだけで機能するはずです。 。

いずれにせよ、フォームが送信されたらプログラムで検証プラグインを実行する限り、問題はありません。あなたはどんなまともなプラグインでもこれを行うことができるはずです-私が上でリンクしたjquery検証にはこの機能があります（それはそれで素晴らしい仕事をしませんが）。次のように実行します。

$('#demo-2-form').on('submit', function(e){
  e.preventDefault();
  if ($(this).validate().form()) {
    $(this).submit();
  } else {
    console.log("fill your form out right man!");
  }
});

これにより、設定したパラメーターに従ってフォームが検証されますが、この特定のプラグインでは、エラーがどこにあるかをマークするための多くの有用な情報が返されません。これを行うために使用できる方法は他にもあります（このプラグインの場合、各フィールドをループしてエラーをチェックする必要があります）が、ここで書き出す価値はないと思いました。

本当に、私は良いjavascript検証ライブラリに出くわしていません（そして私の同僚もいません）。送信をキャッチして、ここに自分で検証を書き込むことは価値があるかもしれません-この方法でより明確になり、必要に応じてカスタマイズできます。さらに、これらの各検証は、JavaScriptの1行程度で書き出すことができます。これは通常私がやることになることであり、それ以上の時間はほとんどかかりません。上記と同じ方法で送信をキャッチできます。jqueryvalidateプラグインの行を、フィールドをチェックして検証する数行に置き換えるだけです。

于 2012-10-16T15:15:54.247 に答える