javascript - 为什么只验证第一个表单？

Question

请引用以下 fiddle 。

<form action="http://someurl.com/" id="test-form-1" method="post" name="test-form-1">
  <input class="test-domainurl" type="url"> <input class="test-order-button" type="submit" value="Continue to Order">
</form>
<form action="http://someurl.com/" id="test-form-2" method="post" name="test-form-2">
  <input class="test-domainurl" type="url"> <input class="test-order-button" type="submit" value="Continue to Order">
</form>


jQuery(document).ready(function($) {
    $(".test-order-button").click(function() {
        $("#test-form-1").validate({});
        $("#test-form-2").validate({});
        $(".test-domainurl").rules("add", {
            required: true
        });
    });
});

http://jsfiddle.net/vak87/

我不确定为什么只验证第一个表单？

有什么想法和建议吗？

谢谢

Answer 1

您应该在 css 选择器中使用 $(this)，并使用 parent() 和 siblings('.test-domainurl') 查找与每个按钮对应的元素。

jQuery(document).ready(function($) {
    $(".test-order-button").click(function() {
        $(this).parent().validate({});
        $(this).siblings('.test-domainurl').rules("add", {
            required: true
        });
    });
});

jsFiddle example