Question

我的搜索表单存在问题我使用的是WordPress插件 IMPress Listings and Search＆amp;过滤以显示列出分类的属性。我已将短代码添加到我的主页。

<?php echo do_shortcode('[searchandfilter submit_label="Search" taxonomies="status,locations,property-types"]');?>

但是在提交空表格时 www.domain.co.uk/estateagents/?s = 这被重定向到头版并混乱所有的CSS并显示网站上我不喜欢的每一篇文章。

我搜索了谷歌周围的所有内容，但答案似乎已经过去了5年，似乎不再适用。

我能想到的最简单的方法是添加表单评估，以便他们可以提交并清空表单并重定向。但由于表单是由短代码生成的，我不确定如何向表单添加类或ID。

这是生成的表格：

<form action="" method="post" class="searchandfilter">
<div>
    <ul><li><select name='ofstatus' id='ofstatus' class='postform' >
    <option value='0' selected='selected' >All Status</option>
    <option class="level-0" value="9">For Rent</option>
    <option class="level-0" value="19">For Sale</option>
    <option class="level-0" value="32">New</option>
    <option class="level-0" value="23">Pending</option>
</select>
<input type="hidden" name="ofstatus_operator" value="and" /></li><li><select name='oflocations' id='oflocations' class='postform' >
    <option value='0' selected='selected'>All Locations</option>
    <option class="level-0" value="21">Birmingham</option>
</select>
<input type="hidden" name="oflocations_operator" value="and" /></li><li><select name='ofproperty-types' id='ofproperty-types' class='postform' >
    <option value='0' selected='selected'>All Property Types</option>
    <option class="level-0" value="20">Bungalow</option>
    <option class="level-0" value="14">Residential</option>
</select>
<input type="hidden" name="ofproperty-types_operator" value="and" /></li><li><input type="hidden" name="ofsubmitted" value="1">
    <input type="submit" value="Search">
</li></ul></div>

如果将其生成为短代码，如何访问？以及如何添加验证以便空表单不会被提交？

Answer 1

Remove the shortcode form created by plugin (If the form is not going to change)

<?php remove_shortcode( 'searchandfilter' );?>

now add you ownshortcode with the form in the callback function of the shortcode.

    <?php add_shortcode( 'searchandfilter', 'my_search_form' );
    function my_search_form($atts, $content){
    //write you own form here
}
    ?>

Validate the form at client side.

Include this js file in header of the page http://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.min.js

put this code below the included JS

<script>
$().ready(function() {
  $("#commentform").validate();
});
</script>

And apply the ID to your form

<form action="" method="post" class="searchandfilter" id="commentform">

and make you input boxes required as

<input id="cname" name="name" minlength="2" type="text" required="" aria-required="true">

For further details goto this link

http://jqueryvalidation.org/files/demo/radio-checkbox-select-demo.html

Wordpress - 访问短代码HTML并添加表单验证以停止空表单提交？

1 个答案: