仅在特定条件下需要输入(WordPress /联系表格7)

时间:2016-10-14 14:56:10

标签: javascript jquery html wordpress validation

我对联系表格7的jQuery脚本没有什么问题。当用户选择“是”时,我显示输入并且它有效,但是在“是”的情况下必须要求这些输入。当我通过WordPress Contact Form 7的短代码向输入添加*时,我无法发送带有空输入的表单,这些表单未显示/隐藏(!),所以我尝试了很多方法只需要输入'yes'/显示,例如:show / hide,CSS display none / block,aria-required,property required,class wpcf7-validates-as-required,change value of input等等。

不幸的是,我没有在联系表格7的文档中找到答案。我希望存在任何解决方案,而无需创建额外的自定义验证。

我把JS代码放在我的所有想法中 - 也许我已经接近找到解决方案了。

我刚刚在与WordPress有关的论坛上询问过这个问题,他们建议我在这里试试。

HTML +短代码WPCF7:

<div class="vc_row wpb_row vc_inner vc_row-fluidr">
  <p>Would you like something?
  [radio question label_first default:1 "No" "Yes"]</p>
    <div id="add-something">
      <div class="wpb_column vc_column_container vc_col-md-6 form-column">
        <label>Company name*[text your-company-name]</label>
        <label>City* [text your-city]</label>
        <label>Postal code* <div class="postal-code"><label>[text your-code-city-1 class:kp-1 minlength:2 maxlength:2]</label> - <label>[text your-code-city-2 class:kp-2 minlength:3 maxlength:3]</label>
    </div>
</div>

JS / jQuery的:

jQuery(document).ready(function() {
  jQuery("#add-something").hide();
  jQuery("#add-something input").hide();


        jQuery("input[name=question]").change(function(){          

        if (jQuery(this).val() == "Yes") {

        jQuery("#add-something input").show();
        var input = jQuery("#add-something input");
        if (input.length > 0) { //If the input field contains any value remove it
            input.val('');
          }
        jQuery("#add-something").slideDown();
        jQuery("#add-something input").attr("aria-required", "true");
        jQuery("#add-something input").addClass("wpcf7-validates-as-required");
        jQuery("#add-something input").prop('required',true);


        }
        else {
        jQuery("#add-something").slideUp();
        jQuery("#add-something input").hide();
        var input = jQuery("#add-something input");
        input.val("NA"); //add NA Value to hidden field that is required!



        jQuery("#add-something input").attr("aria-required", "false");
        jQuery("#add-something input").removeClass("wpcf7-validates-as-required");
        jQuery("#add-something input").prop('required',false);
        }                                                            
   });
});

有什么想法吗? : - )

0 个答案:

没有答案