2

私は現在、jqueryの検証とフォームを使用しています。私はここでこれまで完璧に機能する素晴らしいプラグインに出くわしました。フォームがjqueryタブ内のセクションに分割されているため、壁にぶつかっています。これらのタブに、ボタンおよび<a>として機能するタグを配置しました。クリックして検証する代わりに、またはをクリックしたときにフィールドを検証したいと思い ます。クリック検証でバインドしようとしましたが、結果が得られません。タグをクリックしてフォームを検証するにはどうすればよいですか？これがモックアップの例ですNextPrevioussubmitNextProvious<a>

//jquery tabs- Next and Previous
<script>
    $(function() {

        var $tabs = $('#tabs').tabs();

        $(".ui-tabs-panel").each(function(i){

          var totalSize = $(".ui-tabs-panel").size() - 1;

          if (i != totalSize) {
              next = i + 2;
              $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page &#187;</a>");
          }

          if (i != 0) {
              prev = i;
              $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>&#171; Prev Page</a>");
          }

        });

        $('.next-tab, .prev-tab').click(function() { 
               $tabs.tabs('select', $(this).attr("rel"));
               return false;
           });


    });
</script>

//Jquery Validation
<script>
    jQuery(document).ready(function(){
        // binds form submission and fields to the validation engine
        jQuery("#formID").validationEngine();
    });

    function checkHELLO(field, rules, i, options){
        if (field.val() != "HELLO") {
            // this allows to use i18 for the error msgs
            return options.allrules.validate2fields.alertText;
        }
    }
</script>

//Jquery Bind <a> to validate 
<script>
$(document).ready(function() {
     $("form").validate();
     $("a").bind("click", function() { alert($("form").valid()); });
});
</script>

HTML

<div id="tab-1" class="ui-tabs-panel ui-tabs-hide">
            <form id="formID" class="formular" method="post">
            <span>Name:</span><br>
            <input value="" class="validate[required] text-input" type="text" name="req" id="req" />    
            <label>
                <span>Favorite sport 2:</span>
                <select name="sport2" id="sport2" multiple class="validate[required]">
                    <option value="">Choose a sport</option>
                    <option value="option1">Tennis</option>
                    <option value="option2">Football</option>
                    <option value="option3">Golf</option>
                </select>
            </label>
            </form>           
</div>
4

2 に答える 2

2

タグを動的に追加して<a>いるので、ではなく、を使用する必要があります（liveは非推奨です。jbabeyに感謝します） 。live() on() bind

そうすることで、現在または将来追加される一致する要素が適切にバインドされます。

于 2013-01-30T18:23:19.710 に答える
0

.live()非推奨になっているため、次のように使用する必要があります.on()。

$(document).on("click", ".next-tab, .prev-tab", function(() { 
           $tabs.tabs('select', $(this).attr("rel"));
           return false;
       });
于 2013-01-30T18:26:18.590 に答える