11

フォームを検証して、2 つの空白フィールドがなくなるようにします。少なくとも 1 つのフィールドに入力する必要があり、2 つのフィールドにも入力する必要があります。ただし、フィールドを空白のままにすることはできません。

私は jquery-1.9.1-min.js を使用しています。これが私の html ページです。

<form action="#" class="send_form" id="forgot_pass_form" method="POST">
            <fieldset>
                <div class="send_row">
                    <label class="padding-top10">Email</label>
                    <input type="text" class="send_email" id="email" name="email" />
                    <em>You need to type an email address</em>
                </div>

                <div class="send_row option">OR</div>

                <div class="send_row">
                    <label class="padding-top10">Username</label>
                    <input type="text" class="send_username" id="uname" name="uname" />
                </div>


                <div class="send_row send_submitforgotuser">
                    <input type="submit" value="Submit" />
                </div>
            </fieldset>
            </form>

それを行う方法について何か提案....？

私が試したソファー

 jQuery.validator.addMethod("require_from_group", function(value, element, options) {
    alert("xxx");
    var valid = $(options[1], element.form).filter(function() {
        return $(this).val();
    }).length >= options[0];

    if(!$(element).data('reval')) {
        var fields = $(options[1], element.form);
        fields.data('reval', true).valid();
        fields.data('reval', false);
    }
    return valid;
}, jQuery.format("'Please enter either username/ email address to recover password'/Please fill out at least {0} of these fields."));

まだ無駄な出力が得られません。

4

2 に答える 2

22

jQuery Validate plugin のvalidator.addMethod一部であるを使用しようとしています。このプラグインをコードにまだ含めていない場合は、含める必要があります。

次に、Validate プラグインのファイルrequire_from_groupにすでに含まれているルールを使用します。(ファイルも含めることを忘れないでください。)additional-methods.jsadditional-methods.js

rules: {
    myfieldname: {
        require_from_group: [1, ".class"]
    }
}
  • 最初のパラメーターは、必要なアイテムの数です。

  • 2 番目のパラメーターは、classグループ内のすべての要素に割り当てられます。send2 つの入力要素にクラスを追加しました。

  • また、groupsオプションを使用して 2 つのメッセージを 1 つに統合します。

jQuery :

$(document).ready(function () {

    $('#forgot_pass_form').validate({ // initialize the plugin
        groups: {  // consolidate messages into one
            names: "uname email"
        },
        rules: {
            uname: {
                require_from_group: [1, ".send"]
            },
            email: {
                require_from_group: [1, ".send"]
            }
        }
    });

    //  for your custom message
    jQuery.extend(jQuery.validator.messages, {
        require_from_group: jQuery.format("'Please enter either username/ email address to recover password'/Please fill out at least {0} of these fields.")
    });

});

実際のデモ: http://jsfiddle.net/sgmvY/1/

EDIT： Githubによると、メソッドには未解決の問題require_from_groupがあります。修正されるまで、開発者は以下の解決策を推奨しています。修正したメソッドを手動でコードに追加するため、ファイルを含める必要はありませんadditional-methods.js。

新しい作業デモ: http://jsfiddle.net/kE7DR/2/

$(document).ready(function () {

    jQuery.validator.addMethod("require_from_group", function (value, element, options) {
        var numberRequired = options[0];
        var selector = options[1];
        var fields = $(selector, element.form);
        var filled_fields = fields.filter(function () {
            // it's more clear to compare with empty string
            return $(this).val() != "";
        });
        var empty_fields = fields.not(filled_fields);
        // we will mark only first empty field as invalid
        if (filled_fields.length < numberRequired && empty_fields[0] == element) {
            return false;
        }
        return true;
        // {0} below is the 0th item in the options field
    }, jQuery.format("'Please enter either username/ email address to recover password'/Please fill out at least {0} of these fields."));

    $('#forgot_pass_form').validate({ // initialize the plugin
        groups: {
            names: "uname email"
        },
        rules: {
            uname: {
                require_from_group: [1, ".send"]
            },
            email: {
                require_from_group: [1, ".send"]
            }
        }
    });



});
于 2013-02-28T16:15:46.273 に答える