我对联系表格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);
}
});
});
有什么想法吗? : - )