3

div ボタンがクリックされたときに起動するには、この検証が必要です。検証が成功した場合は、「良い」というアラートを出してほしい。

残念ながら、検証が開始され、すべてのルールがチェックされますが、必須フィールドが空白の場合でもエラーにはなりません。他のチェックではエラーになります。

最後に、フィールドに正しく入力してボタンをクリックしても何も起こりません。

JS:

$(document).ready(function() {

// Submit prompted password reset
$("#passwordResetButton").click(function() {

    $("#passwordResetForm").validate({  
        rules: {
            password: { required: true, minlength: 8, maxlength: 40, remote: { url: "/ajax/isPasswordOK", data: { product: function() { return $("#password").val();  } } } },
            confirmPassword: { required: true, equalTo: "#password" },
        }, 
        messages: { 
            password: { required: "Please enter a password", minlength: "Password must be at least 8 characters long", remote: "Password should contain: <li>At least one upper case character <li>At least one lower case character <li>At least one number <li>And may not contain any of the following: \\;-\")(&*='|$" },
            confirmPassword: { required: "Please confirm your password", equalTo: "The passwords do not match" },
          }, 
        onkeyup: false, //turn off auto validate whilst typing
        onblur: true,
        afterValidation: function() {
            alert('is good');
        }
    });
});
});

HTML:

<form id="passwordResetForm" style="width: 480px; margin: auto;">
        <div class="row"><p class="lead">Let's reset that password</p></div>
        <div class="row">
            <div class="small-8 large-4 columns"><label>New Password:</label></div>
            <div class="small-12 large-6 columns"><input name="password" id="password" type="password" size="20"/></div>
        </div>
        <div class="row">
            <div class="small-8 large-4 columns"><label>Confirm Password:</label></div>
            <div class="small-12 large-6 columns"><input name="confirmPassword" id="confirmPassword" type="password" size="20"/></div>
        </div>
        <div class="row">
            <div class="large-offset-10 small-3 large-1 columns">
                <div id="passwordResetButton"  class="small button">Submit</div>
            </div>
        </div>
    </form>
4

2 に答える 2

27

コードにはいくつかの問題があります。

1 ) .validate()はプラグインの初期化メソッドであり、フォームをテストするためのメソッドではありません。つまり、clickハンドラー内に配置しないでください。必要なときに準備ができていません。DOM .validate()Ready イベント ハンドラー内に配置して、ページが作成されたときに 1 回起動されると、フォームはすぐに検証の準備が整います。

2onblur )このプラグインのようなオプションはありません。それが呼び出されonfocusout、オプションはデフォルトですでに有効になっています。 このタイプのオプションを に設定することtrueは無効であり、おそらく何かが壊れる可能性があるため、初期化から完全に除外してください。

3 ) と呼ばれるオプション/機能はありませんafterValidation:。コールバック関数を単に「発明」することはできません... jQuery プラグインには、これらのものがすでに組み込まれている必要があります。有効なフォームで何かを起動したい場合は、提供されているsubmitHandler:コールバック関数を使用してください。

submitHandler: function (form) {
    alert('is good');
    return false;
}

4 )フォームの送信にはa<input type="submit" />または aを使用します。<button type="submit">Submit</button>このようにして、プラグインは自動的にクリック イベントをキャプチャし、送信を設計どおりに処理できます。

5 ) マイナー ノート: カスタム メッセージの場合は、 を使用するだけ{0}で、ルールのパラメーターが自動的に挿入されます。この種のコードは保守が容易です。

minlength: "Password must be at least {0} characters long",

実際のデモ: http://jsfiddle.net/J9N3g/

ここで完全なドキュメントを確認することをお勧めします: http://docs.jquery.com/Plugins/Validation

jQuery :

$(document).ready(function () {

    $("#passwordResetForm").validate({
        rules: {
            password: {
                required: true,
                minlength: 8,
                maxlength: 40,
                remote: {
                    url: "/ajax/isPasswordOK",
                    data: {
                        product: function () {
                            return $("#password").val();
                        }
                    }
                }
            },
            confirmPassword: {
                required: true,
                equalTo: "#password"
            },
        },
        messages: {
            password: {
                required: "Please enter a password",
                minlength: "Password must be at least {0} characters long",
                remote: "Password should contain: <li>At least one upper case character <li>At least one lower case character <li>At least one number <li>And may not contain any of the following: \\;-\")(&*='|$"
            },
            confirmPassword: {
                required: "Please confirm your password",
                equalTo: "The passwords do not match"
            },
        },
        onkeyup: false, //turn off auto validate whilst typing
        submitHandler: function (form) {
            alert('is good');
            return false;
        }
    });

});

HTML :

<form id="passwordResetForm" style="width: 480px; margin: auto;">
    <div class="row">
        <p class="lead">Let's reset that password</p>
    </div>
    <div class="row">
        <div class="small-8 large-4 columns">
            <label>New Password:</label>
        </div>
        <div class="small-12 large-6 columns">
            <input name="password" id="password" type="password" size="20" />
        </div>
    </div>
    <div class="row">
        <div class="small-8 large-4 columns">
            <label>Confirm Password:</label>
        </div>
        <div class="small-12 large-6 columns">
            <input name="confirmPassword" id="confirmPassword" type="password" size="20" />
        </div>
    </div>
    <div class="row">
        <div class="large-offset-10 small-3 large-1 columns">
            <input type="submit" id="passwordResetButton" class="small button" />
        </div>
    </div>
</form>
于 2013-04-14T14:53:31.423 に答える