代码之家  ›  专栏  ›  技术社区  ›  Jin Lee

(html5,jquery)jquery忽略输入元素的属性

  •  0
  • Jin Lee  · 技术社区  · 6 年前

    在HTML5中,当我制作如下文本框时,按提交按钮。

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

    当该值不满足最小值、最大值时,将不会继续。然而,

    我处理文本框的按钮是由jquery组成的。当我不键入任何内容并单击时,它会处理它。当我输入超过100的值时,它也会处理它。(其他标签等中有其他值)

    我是否可以向jquery添加一些内容,以便它检查文本框中的条件或需求?

    我想在这里显示jquery代码,但它很长。其中一些看起来像下面。

    $("#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);
                    }
                }
    
    3 回复  |  直到 6 年前
        1
  •  1
  •   RAGINROSE T.J. Crowder    6 年前

    您可以在自己的jquery click函数中添加一个validate函数。在该验证函数中,必须验证输入字段的值。如果超过100,则返回false

        2
  •  1
  •   Kaiido NickSlash    6 年前

    而不是<按钮>' 点击 事件,您要挂接<表单>' 提交 一个。

    这个 点击 即使表单无效,事件也将激发,而 提交 首先进行验证:

    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>
        3
  •  1
  •   Younes Zaidi    6 年前

    像这样使用验证引导程序

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