php - 限制 wordpress 模板默认搜索中的最小字符数

Question

这是我网站的 woocommerce 产品 page 如您所见，我使用了两个搜索:第一个位于联系人菜单项上方，第二个位于侧边栏中。第一个搜索是模板默认搜索，第二个是 woocommerce 产品搜索小部件。

我的目标是限制两个搜索中的字符数。我在 woocommerce 产品搜索小部件中有这段代码，效果很好。只需尝试使用少于 17 个字符进行搜索，您就会明白我的意思:

<form role="search" method="get" class="woocommerce-product-search" action="<?php echo esc_url( home_url( '/'  ) ); ?>">
<label class="screen-reader-text" for="s"><?php _e( '', 'woocommerce' ); ?></label>
<input pattern=".{17,}" required title="17 characters minimum" class="search-field" placeholder="<?php echo esc_attr_x( 'Search Products&hellip;', 'placeholder', 'woocommerce' ); ?>" value="<?php echo get_search_query(); ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label', 'woocommerce' ); ?>" />
<input type="submit" value="<?php echo esc_attr_x( 'Search', 'submit button', 'woocommerce' ); ?>" />
<input type="hidden" name="post_type" value="product" />

但相同的代码(在复制/粘贴之后)不适用于第一次搜索。 这是第一个/模板默认搜索代码:

<div class="widget-search">
<form action="<?php echo esc_url( get_home_url() ); ?>/" class="searchform" id="searchform" method="get" role="search">
    <input type="search" value="<?php echo get_search_query(); ?>" name="s" id="s" placeholder="<?php _e( 'Search...', 'pixar' ); ?>">
    <button type="submit"> <i class="fa fa-search"></i> </button>
</form>
</div>

模板默认搜索如何得到相同的结果？简单的复制/粘贴不起作用。

Answer 1

尝试实现这个代码片段，我希望这段代码能有所帮助

<link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-demos.css">
 
<form id="myform">
<label for="field">Required, minimum length 17: </label>
<input type="text" class="" id="" name="field5">
<br/>
<br/>
<input type="submit" value="Validate!">
</form>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
$( "#myform" ).validate({
  rules: {
    field5: {
      required: true,
      minlength: 17
    }
  }
});
</script>

保持表单的id和输入框name属性相同