Limit minimum characters in wordpress themplate default search - php

Question

This is my site's woocommerce product page
As you can see, I use two search: The first above contact menu item and the second one in sidebar. First search is a template default search and the second one is woocommerce product search widget.
My aim is to limit character numbers in both search. I have this code in woocommerce product search widget and it works good. Just try to search with less then 17 characters and you will see what I mean:
<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…', '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" />
But the same code (after copy/paste) doesn't work for the first search.
This is the first/template default search code:
<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>
How to get the same result for the template default search? Simple copy/paste doesn't work.

Answer 1

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="" 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>
just keep the id of form and input field name attributes same