在 WooCommerce 产品搜索小部件中设置最少字符答案

【问题标题】：Set minimum characters in WooCommerce product search widget在 WooCommerce 产品搜索小部件中设置最少字符
【发布时间】：2016-04-18 04:22:27
【问题描述】：

我正在使用 WooCommerce 产品搜索小部件并在此代码中添加 minlength="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( 'Search for:', 'woocommerce' ); ?></label>
   <input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search Products&hellip;', 'placeholder', 'woocommerce' ); ?>" value="<?php echo get_search_query(); ?>" minlength="17" 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" />
</form>

它在 Chrome 中运行得非常好。它显示一条消息：

"请将此文本延长至 17 个字符或更多（您目前使用 * 字符)"。

这是我需要的，但在 Firefox 和 IE 中不需要。当我在搜索字段中输入 3,4 或少于 17 个字符时，它会开始搜索。

怎么办？如何让它在所有浏览器中运行？！

【问题讨论】：

试试这样的，<input pattern=".{17,}" required title="17 characters minimum">
目前并非所有浏览器都支持minlength ..wufoo.com/html5/attributes/…
我不确定我是否理解如何在我的代码中实现。无论如何，它不会在我认为的所有浏览器中工作。
pattern=".{17,}" required title="17 characters minimum" 这就是你需要的。
我在上面的代码中究竟可以在哪里添加这个片段？？

标签： php html wordpress woocommerce woothemes

【解决方案1】：

尝试实现这个sn-p，希望这段代码对你有帮助

<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="left" id="field" name="field">
<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: {
    field: {
      required: true,
      minlength: 17
    }
  }
});
</script>

【讨论】：

它在 Internet Explorer 和移动/响应版本中不起作用
@Merkucio 我正在粘贴一个 jquery 代码 sn-p 进行验证

【解决方案2】：

看看这个。

<form action="">

<input minlength="17" >
<input pattern=".{17,}"   required title="17 characters minimum">
<input pattern=".{5,10}" required title="5 to 10 characters">

<input type="submit">
</form>

DEMO

【讨论】：

您查看了演示吗？在Firefox中检查这个，即.. fiddle.jshell.net/5d1Lfj2r/show/light
我当然做到了。最后一个链接甚至没有显示任何将文本放入 FF 和 IE 的字段。它仅适用于 Chrome。
你的浏览器是什么版本的？
我更新了 FF，现在它在 FF 中也可以在 Chrome 中使用。但不是在 IE 9 中。我现在使用此代码 jsfiddle.net/merkucio1/ufcffbjh/8 奇怪，但它适用于 FF 和 chrome。

【解决方案3】：

你可以用javascript代码做到这一点

<input onblur="checkLength(this)" id="groupidtext" type="text" style="width: 100px;" minlength="6" />
<!-- or use event onkeyup instead if you want to check every character strike-->


function checkLength(el) {
  if (el.value.length <= 6) {
    alert("length must be atleast 6 characters")
  }
}

【讨论】：

能否请您更清楚我在哪里可以添加此代码？