Question

我目前正在使用jquery验证和表单。我遇到了一个很棒的插件HERE，到目前为止完美无缺。我遇到了一个墙，因为我有一个表单分成jquery选项卡内的部分。我已在这些标签中添加<a>个标记，用作按钮Next和Previous。我希望在点击submit或Next时验证字段，而不是点击Provious进行验证。我已尝试绑定到点击验证但我没有得到任何结果。如何通过点击<a>代码验证表单？这是一个模型Example

//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>

Answer 1

您正在动态添加<a>代码，因此您需要使用 ~~live()~~ on() （不赞成直播，感谢jbabey）< / em>，而不是bind。

这样，现在或将来添加的任何匹配元素都将被正确绑定。

Answer 2

不推荐.live()，您应该使用.on()，如下所示：

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

通过<a> tag click</a>验证表单

2 个答案: