验证点击联系表 7答案

【问题标题】：Validation on click in contact form 7验证点击联系表 7
【发布时间】：2016-03-30 09:32:10
【问题描述】：

我正在构建基于 联系表 7 的自定义分步表单，我需要在进入下一部分之前验证字段。我如何在点击时调用验证功能？我在文档中找不到它。

$( "#next-section" ).click(function() {

  //call validate function (how to do this)??

  if('validate function no errors') {
    //call my scripts 
  }
});

【问题讨论】：

我觉得你需要这个。 stackoverflow.com/questions/27798264/…

标签： jquery wordpress contact-form-7

【解决方案1】：

你可以这样做：

$( "#next-section" ).click(function() {
  $('your-form').submit();
});

【讨论】：

不工作。这是个好主意，但我如何在 jquery 中的 contactform7 上初始化提交？
当我想验证并且可见内容后的字段有错误时也会出现问题，因此它不会让使用更进一步
不需要初始化提交。 submit() 是一个用于提交表单的函数 jquery。但不验证字段。因为 .submit() 不使用 dom 中的 html 5 属性。

【解决方案2】：

您可以调用 .validate 插件进行表单验证。

$( "#next-section" ).click(function() {
   $("#form").validate({
      rules: {
         name: "required",
      },
      messages: {
         name: "name is required",
      },
      submitHandler: function(form) {
         form.submit();
      }
    });
});

【讨论】：

【解决方案3】：

我遇到了同样的问题并找到了解决方案。

我有 2 步表单，我有一个想法提交表单，然后检查第 1 步的输入字段是否经过验证（显然，由于第 2 步的字段很少，因此无法发送表单，这是制作的只是为了使用 CF7 验证）。

$('.go_to_step_2').on('click', function () {

    var input = $('input[name="your-name"]'),
        form = $(this).parents('.wpcf7-form');

    form.submit();

    // trigger just one time! so validation works correctly in the 2nd step
    form.parent().one('wpcf7:invalid', function() {

        if( !input.hasClass('wpcf7-not-valid') ) {

            // this will hide valid-tips from step 2
            $('.step_2').find('.wpcf7-not-valid-tip').fadeOut(0);

            // do stuff to show step 2
        }
    });
});

【讨论】：