2

我目前正在使用 jquery 验证和表单。我在这里遇到了一个很棒的插件，到目前为止效果很好。我遇到了墙，因为我有一个表单在 jquery 选项卡内分成几个部分。我在这些选项卡中放置了<a>充当按钮Next和Previous. submit我想在单击 Next或时验证字段，而不是单击验证Provious。我尝试绑定到单击验证，但没有得到任何结果。如何通过单击<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 is deprecated, Thanks 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 回答