（HTML5，JQuery）JQuery忽略Input元素的属性

Question

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

Answer 1

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

Answer 2

您希望挂钩

的 submit 一个，而不是的 click 事件。

即使表单无效，也会触发 click 事件，而 submit 则将首先执行验证：

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

像这样使用验证引导程序

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