javascript - jquery 验证器的 valid() 方法总是返回 true

Question

我正在使用 jquery 验证器，输入字段留空并显示其值为空，但 jquery valid() 方法始终返回 true。实际上表单中有几个标签，每次点击 next 都会显示下一个标签，而上一个标签会被隐藏。所以我们不能一次验证所有的表单我的验证规则是:

$('#wizard_example_1').validate({
    rules: {
        link_client_name: {
            required: true
        },
        link_page_url: {
            required: true,
            url: true
        },
        link_title: {
            required: true
        },
        link_message: {
            required: true
        },
        link_text: {
            required: true
        },
        link_url: {
            required: true,
            url: true
        }
    }
});

用于检查元素是否有效的 jquery 代码如下

$('.next-btn').on('click', function (e) {
    e.preventDefault();
     count++;
     if (obj['camp_type'] === "1") {
         var valid = false;
         $.each($('#link input'), function (i, v) {
             var id=$(this).attr('name');
             valid=$('input[name="' + $(this).attr('name') + '"]').valid();
         });
         if(valid) {
             obj = {};
             obj['camp_type'] = "1";
             obj['client_name'] = $('#link_client_name').val();
             obj['page_url'] = $('#link_page_url').val();
             obj['title'] = $('#link_title').val();
             obj['message'] = $('#link_message').val();
             obj['action_text'] = $('#link_text').val();
             obj['action_url'] = $('#link_action_url').val();
             console.log(obj);
         }else{
             return false;
         }
     }
});

Answer 1

尝试用这个方法实现。

var $ValidateForm = $('#wizard_example_1').validate({
    rules: {
        link_client_name: {
            required: true
        },
        link_page_url: {
            required: true,
            url: true
        },
        link_title: {
            required: true
        },
        link_message: {
            required: true
        },
        link_text: {
            required: true
        },
        link_url: {
            required: true,
            url: true
        }
    }
});

 $('.next-btn').off();
  $(document).on('click', '.next-btn', function () {
                    if ($ValidateForm.form()) {
                      // your logic 
}
                });