通过 <a> 标签点击验证表单答案

【问题标题】：Validate form through <a> tag click通过 <a> 标签点击验证表单
【发布时间】：2013-01-30 18:15:13
【问题描述】：

我目前正在处理 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>

【问题讨论】：

标签： javascript jquery jquery-validation-engine

【解决方案1】：

您正在动态添加 <a> 标签，因此您需要使用 ~~live()~~ on() （不推荐使用 live，感谢 jbabey），而不是到bind。

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

【讨论】：

.live() 在 1.7 中已被弃用，在 1.9 中已被删除，.on() 是绑定处理程序的首选函数。
啊，我错过了 API 页面上的通知。已编辑。
+1 我也没有意识到这一点。我按照您的回答使用了.on()，但是当将字段留空并单击<a> 时，它不会验证任何内容。

【解决方案2】：

由于.live() 已被弃用，您应该使用.on()，如下所示：

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

【讨论】：