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

first of all, in order to use min/max you would need the input to be of type="number"... I don't know if jQuery has anything built in for that, but as far as the spec goes, there is nothing preventing you from entering whatever number you want (say, 200), so your code as-is will continue working as it does now even if you change the input type. See developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/… for more information — Leroy Stav
– Leroy Stav, Commented Jan 11, 2019 at 6:08
@Leroy Stav oops, you are right, it is type=number. I wrote it here wrong. I didn't put it here but I also added maxlength, required attribute. but didn't work. Jquery just takes whatever input. — Jin Lee
– Jin Lee, Commented Jan 11, 2019 at 7:59
you can add a validate function in side 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 — RAGINROSE
– RAGINROSE, Commented Jan 11, 2019 at 8:24
Instead of listening for a click event, which will get emitted even though the form has invalid inputs, the event you want is the submit one, which will fire on the <form> element. — Kaiido
– Kaiido, Commented Jan 11, 2019 at 8:39

RAGINROSE · Accepted Answer · 2019-01-11 08:31:52Z

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

answered Jan 11, 2019 at 8:31

RAGINROSE

7248 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kaiido · Accepted Answer · 2019-01-11 08:44:17Z

1

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>

answered Jan 11, 2019 at 8:44

Kaiido

139k15 gold badges266 silver badges333 bronze badges

Comments

Younes Zaidi · Accepted Answer · 2019-01-11 09:08:14Z

1

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>

answered Jan 11, 2019 at 9:08

Younes Zaidi

1,1901 gold badge8 silver badges25 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related