( 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.

<input type='number' name ='search_size' id ='search_size' class="" value="" min="0" max="100" >

When the value doesn't meet the min, max value, it will not proceed. However,

My button that handles the text box is made of JQuery. When I type nothing, and click, it processes it. When I type the value over 100, it also processes it. (There are other values from other tags and etc.)

Is there something I can add to JQuery so that it will check the condition or requirement in the text box?

I want to show the JQuery code here, but it is pretty long. Some of it looks like the below.

$("#search_submit").off("click").on("click", function(event_receiver){
        $("#loading").css('z-index',-1);
        $("#loading_search").css('top',$("#dialog_data_search").position().top + ($("#dialog_data_search").height()*0.7) );
        $("#loading_search").show();

        var search_data;
        var request_obj = {
                "baseDN" : $("#search_base_dn").val()
                ,"filter":$("#search_filter").val()
                ,"attribute":$("#search_attribute").val()   
                ,"sortAsc":true
                ,"scope":$(":radio[name='search_scope']:checked").val()
                ,"size":$("#search_size").val()};   //<--  this guy!!

        $.ajax({
            url:"/browser/ajaxGetSearchData"
            ,dataType:"json"
            ,data:request_obj
            ,async:true
            ,type:"post"
            ,success:function(return_data){
                if(return_data.success){                        
                    search_data = return_data.result;
                }else{
                    alert(return_data.message);
                }
            }

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>