( HTML5, JQuery) Attributes of Input elements are ignored by JQuery

Question

In HTML5, when I make a text box like below, and press the submit button.

Answer 1

you can add a validate function inside the jquery click function of yours. in that validate function the value of the input field must be validated. if it exceeds 100 it should return false

Answer 2

Instead of the <button>'s click event, you want to hook on the <form>'s submit one.

The click event will fire even though the form is invalid, while the submit one will first perform the validation:

document.getElementById('btn').onclick = e => console.log('btn has been clicked');
document.getElementById('form').onsubmit = e => console.log('form has been submitted');

<!-- an always invalid form... -->
<form id="form">
  <input name="foo" maxlength="0" required>
  <button id='btn'>bar</button>
</form>

Answer 3

Use validation bootstrap like this

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <form>
      <div class="form-group">
        <label for="number">Number</label>
        <input type="number" class="form-control" name ='search_size' id ='search_size' value="0" min="0" max="100" required>
      </div>
      <button class="btn" type="submit">submit</button>
    </form>