Set minimum characters in WooCommerce product search widget - php

Question

I'm using WooCommerce product search widget and add minlength="17" fragment in this code:
<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…', '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>
And it works very nice in Chrome. It shows a message:
"Please lengthen this text to 17 characters or more(You are currently
use * characters)".
This is what I need, but it doesn't in Firefox and IE.
When I put 3,4 or less then 17 characters in search field, It starts search.
What to do? How to make it working in all browsers?!

Answer 1

check this out.
<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

Answer 2

You can do it with javascript code
<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")
}
}

Answer 3

Try to implement this snippet, i hope this code will help
<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>