2

jQuery validator.addMethodを使用して、名前ではなくクラス名に基づいてチェックボックスを検証するのに問題があります。

これを見て、html内のスクリプトタグ内に配置したときにスクリプトが機能しない理由を教えてください。

コードはここにあります：http：//jsbin.com/ecozih/2

スクリプトをJSbinのJavaScriptウィンドウに移動すると、機能します。

これを行う簡単な方法があれば、私に知らせてください。例をいただければ幸いです。

<html>
  <head>
<script src="hxxp://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="hxxp://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>

  </head>
<body>
<script>
$.validator.addMethod('interests', function (value) {
return $('.interests:checked').size() > 0; }, 'Pick one or more');
var checkboxes = $('.interests');
var checkbox_names = $.map(checkboxes, function(e,i) { return $(e).attr("name")}).join(" ");
$("#subscribeForm").validate({
    groups: { checks: checkbox_names },
    errorPlacement: function(error, element) {
             if (element.attr("type") == "checkbox")
               error.insertAfter(checkboxes.last());
             else
               error.insertAfter(element);
}
});
</script>
<form name="subscribeForm" id="subscribeForm" method="post">
<input type="checkbox" class="interests" value="1" name="group[1357][1]" ><label>Bananas</label>
<input type="checkbox" class="interests" value="2" name="group[1357][2]"><label>Oranges</label>
<input type="checkbox" class="interests" value="4" name="group[1357][4]"><label>Apples</label><br />
<label for="checks" generated="true" class="error" style=""></label><br />
<input type="submit" />
</form>
  </body>

ありがとうございました

4

1 に答える 1

2

jQueryコードを。でラップするのを忘れましたdocument.ready。つまり、jQueryは、要素が構築される前に要素を選択しようとしています。これdocument.readyを修正します。formコードが呼び出されたときにはまだ存在しないため、document.readyHTMLDOMの準備ができたときにのみ起動します。

jsFiddleデモ： http ：//jsfiddle.net/TCHYJ/

およびjsBin：http: //jsbin.com/ecozih/4/edit

引用： 「スクリプトをJS binのJavaScriptウィンドウに移動すると、機能します。」

これは、jsBinとjsFiddleのJavaScriptペイン内のコードは、使用するかどうかに関係なく、DOMがロードされるのを待ってから起動されるためdocument.readyです。

http://jsfiddle.net/TCHYJ/1/

http://jsbin.com/ecozih/6/edit

<script>
    $(document).ready(function() {

        $.validator.addMethod('interests', function(value) {
            return $('.interests:checked').size() > 0;
        }, 'Pick one or more');
        var checkboxes = $('.interests');
        var checkbox_names = $.map(checkboxes, function(e, i) {
            return $(e).attr("name")
        }).join(" ");

        $("#subscribeForm").validate({
            groups: {
                checks: checkbox_names
            },
            errorPlacement: function(error, element) {
                if (element.attr("type") == "checkbox") error.insertAfter(checkboxes.last());
                else error.insertAfter(element);
            }
        });

    });​
</script>
于 2012-11-14T14:42:16.960 に答える