Максимальное количество символов в поле поиска

Question

У меня есть поле поиска, и у него нет этой типичной кнопки отправки. Это выглядит следующим образом:

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> 

Я только добавил span и не input элемент для кнопки отправки. Как я могу проверить, если пользователь вводит или вводит не менее двух символов? Если пользователь вводит только 1 символ, то нажимает эту кнопку поиска или просто нажимает клавишу ввода, в нижней части поля поиска должно появляться красное сообщение об ошибке «Ключевое слово должно быть не менее двух символов» или что-то в этом роде.

Я попробовал этот код, но он не работает:

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; 
      } 
     }); 
    } 
} 

Нужна помощь. Благодарю.

EDIT:

После ввода ключевых слов и нажмите клавишу ввода, страница будет перенаправлять на страницу результатов поиска, но это должно быть предотвращено происходит, если введенное ключевое слово не имеют 2 или больше символов, следовательно, отображая сообщение с красным текстовым сообщением под полем поиска. Как это сделать?

Answer 1

Вы можете использовать атрибут шаблона на входе 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>

Вот является 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>

Ref: http://jqueryvalidation.org/documentation/

Answer 3

Попробуйте используя .previousElementSibling выбрать span.nodeName выбрать input установить div.innerHTML пустую строку "" или "Keyword should be not less than 2 characters", используя input событие

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>

Answer 4

Я сделал jsfiddle, которые могут быть близки к тому, что вы хотите.

Возьмите gander и посмотрите, что вы можете сделать.

Не стесняйтесь задавать вопросы об этом.

Моего лучшее объяснение:

Существует обработчик события на обоих input и кнопка submit, что проверить значение на вход в. На основании условий, которые я предположил из вашего вопроса, отображается предупреждение об ошибке или сообщение об ошибке. Предупреждение о успехе может быть заменено вызовом ajax или инициировать отправку формы.