CODEWITHSUNDEEP
javascriptjqueryhtml
Jin Lee
Jin Lee

Reputation: 3512

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

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

Upvotes: 0

Views: 125

Answers (3)

Younes Zaidi
Younes Zaidi

Reputation: 1190

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>

Upvotes: 1

Kaiido
Kaiido

Reputation: 136986

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>

Upvotes: 1

RAGINROSE
RAGINROSE

Reputation: 724

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

Upvotes: 1

Related Questions