javascript - 我确实有一个表单，其中如果用户输入内容，它应该检查负数或空输入框并抛出警报消息

Question

下面是我的代码。我确实有一个由三个下拉菜单和输入框组成的表单。所以我确实想检查字段是否为空或输入了负数？

//Dependant dropdown code
    $("#item").change(function() {
    var iname = $(this).val();
    $.post("fetch_data.php",
       {"iname": iname},
        function (data) { 
      document.getElementById('new_select').innerHTML=data; 
        });
      });
    $('#submitBtn').click(function(){
  var txt = $(".check").val();
  if(parseInt(txt) < 0 || txt == -1){
    alert("Enter positive values ..!!!!");
  }else{
     $('#sess').text($('#sesion').val());
     $('#ite').text($('#item').val());
     $('#new').text($('#new_select').val());
     $('#qin').text($('#qtyin').val());
     $('#qout').text($('#qtyout').val());
     }
});
$('#submit').click(function(){
     $.ajax({
           type:"POST",
           url:'profile.php',
           data:{sesion:$("#sess").text(),iname:$("#ite").text(),price:$("#new").text(),category:$("#qin").text(),qty:$("#qout").text()},
           success: function(data){ 
             $("#confirm-submit").modal("hide");

             $("#result").html("<div class='alert alert-warning'>Record Inserted Successfully</div>");
             setTimeout(function(){
              $("#result").fadeOut();
               },5000);
             window.location.reload();
             }

        });
});


});
<form method='post' name='ireg' class="form-inline" role="form" id="formfield" enctype="multipart/form-data" onsubmit="return validateForm();">
               <table id="entry" class="table table-responsive">
                <tr>
                  <td> <label for="sesion">Session</label></td>
                  <td><select id="sesion" name="sesion"  class="form-control check"> 
                    <option>--Select--</option>
                    <option>Breakfast</option>
                    <option>Lunch</option>
                    <option>Dinner</option>
                  </select></td>
                  <td> <label for="item_name">Item Name</label></td>
                  <td><select  name="iname" id="item" class="form-control check" style="width:180px;">
                     <option>Select Item</option>
                      <?php
                      include 'db.php';
                         $select = $conn->query("SELECT item_name from items");
                         while($row = mysqli_fetch_array($select, MYSQLI_ASSOC))
                         {
                          echo "<option>".$row['item_name']."</option>";
                         }
                       ?>
                        </select>
                      </td>
                  <td>
                    <label for="new_select">Price</label>
                  </td>
                  <td>
                    <select id="new_select" name="new_select" class="form-control check">
                    <option>Select Price</option>
                    </select>
                  </td>
                   <td>
                    <label for="qtyin">Qty(Dine In)</label>
                  </td>
                  <td>
                     <input type="number" id="qtyin" min="0" name="qtyin" class="check" placeholder="QTY Dine In" style="width:80px;"/>
                   </td>
                  <td>
                    <label for="qtyout">Qty(Parcel)</label>
                  </td>
               <td>
                <input type="number"  id="qtyout" name="qtyout" min="0" class="check" placeholder="QTY Dine Out" style="width:80px;"/>
               </td>
               <td> 
             <!--    <button type="submit" name="submit" class="btn btn-primary">Submit</button> -->
            <input type="button" name="submit" value="Submit" id="submitBtn" data-toggle="modal" 
            data-target="#confirm-submit" class="btn btn-success" />

              </td>
                </tr>
             </table> 
             </form>

我正在尝试从需要验证的用户那里获取输入，一旦验证通过，就会进入模式弹出窗口进行确认，然后提交过程。

Answer 1

如果支持 HTML5 验证，则不需要 jQuery 进行验证。

<input type=number min=0 required placeholder='Enter a positive number'> 

如果您想要自定义验证消息，请执行以下操作:

<input type=number min=0 required placeholder="Enter a positive number"
             oninvalid="this.setCustomValidity('Enter User Name Here')"
             oninput="setCustomValidity('')">

:invalid psuedo 类可用于向其应用自定义 CSS。

This链接包含一些示例。有关浏览器支持，请参阅 caniuse .

编辑:

对于下拉菜单，您可以使用 required属性。

 <select required>
  <option value="">None</option>
  <option value="Option1">Option1</option>
  <option value="Option2">Option2</option>
  <option value="Option3">Option3</option>
</select>

请注意，第一个选项必须为空。申请详情required至<select>请参阅this问题。