WordPress - 访问简码 HTML 并添加表单验证以停止空表单提交

Wordpress - Access shortcode HTML and add Form Validations to stop empty form submission?

本文关键字：验证 表单提交 表单 添加 访问 简码 HTML WordPress      更新时间：2023-09-26

我的搜索表单有问题，我正在使用WordPress
插件IMPress 列表和搜索和过滤器以显示属性列表分类法。我已将简码添加到我的主页。

<?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>

如果它生成为短代码，我如何访问它？ 以及如何添加验证以使空表单不会提交？

删除插件创建的简码表单（如果表单不会更改）

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

现在，在简码的回调函数中使用表单添加您自己的短代码。

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

在客户端验证表单。

将此 js 文件包含在页面的标题中http://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.min.js

将此代码放在包含的 JS 下方 

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

并将 ID 应用于表单

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

并使您输入框需要作为

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

有关更多详细信息，请访问此链接

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

相关文章：