Maximum number of characters in the search field

Question

I have a search box and it does not have this typical submit button. It looks like this:

HTML:

<div class="input-group">
    <input type="text" class="form-control" name="keyword" id="searchbox" onkeypress="return checkLength()"/>
    <span class="btn btn-primary input-group-addon" onclick="checkLength()"><i class="fa fa-search"></i></span>
</div> 

I added only the item span, not the item inputfor the submit button. How can I check if the user enters or enters at least two characters? If the user enters only 1 character, then presses this search button or simply presses the enter key, a red error message “Keyword must be at least two characters” or something like that should appear at the bottom of the search field.

I tried this code but it does not work:

function checkLength(){
    var textbox = document.getElementById("searchbox");
    if(textbox.value.length <= 10 && textbox.value.length >= 2){
        alert("success");
    } else {
        alert("Keyword should be not less than 2 characters");
        $(document).keypress(function (e) {
            var keyCode = (window.event) ? e.which : e.keyCode;
            if (keyCode && keyCode == 13) {
                e.preventDefault();
                return false;
            }
        });
    }
}

Need help. Thanks.

EDIT:

, , 2 , , . ?

Answer 1

pattern HTML5, CSS:

.error {
  display: none;
  font: italic medium sans-serif;
  color: red;
}
input[pattern]:required:invalid ~ .error {
  display: block;
}

<form>
  <input type="text" name="pattern-input" pattern=".{2,}" title="Min 2 characters" required>
  <input type="submit">
  <span class="error">Enter at least two characters</span>
</form>

Hide result

Fiddle

. , IE9 , , : ,: : CSS , Safari .

Answer 2

JQuery. .

$(document).ready(function(){
    $("#registerForm").validate();
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<form id='registerForm' name='registerForm' method='post' action='' >   <p>
   Search <input type='text' name='name' id='name'  minlength="2"     class='required' />
   </p>
</form>

Hide result

: http://jqueryvalidation.org/documentation/

Answer 3

.previousElementSibling, span .nodeName, input div .innerHTML "" "Keyword should be not less than 2 characters", input event

var msg = document.getElementById("msg");

function checkLength(elem) {
  var el = elem.type === "text" ? elem : elem.previousElementSibling
  , len = el.value.length < 2;
  msg.innerHTML = len ? "Keyword should be not less than 2 characters" : "";
  $(el).one("input", function() {
    checkLength(this)
  })
}

#msg {
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="input-group">
  <form>
    <input type="text" class="form-control" name="keyword" id="searchbox" />
    <input type="button" class="btn btn-primary input-group-addon" onclick="checkLength(this)" value="X" />
  <div id="msg"></div>
  </form>
</div>

Hide result

Answer 4

jsfiddle, , .

, .

.

:

On the buttons input, submitthere is an event handler that checks the input value. Based on the conditions that I suggested from your question, an error warning or error message is displayed. Success warning can be replaced by ajax call or initiate form submission.