我有一种表格，如果用户输入内容，则应检查输入框是否为空或否，并发出警报消息 [英] I do have a form wherein if a user enters input it should check for negative or empty input box and throw an alert message

问题描述

这是我下面的代码.我确实有一个包含三个下拉菜单和输入框的表格.所以我想检查一个字段是空白还是输入负数?

Here is my code below. I do have a form wherein consists of three dropdowns and input boxes.So I do want to check whether a field is blank or for negative numbers being entered?

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

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

I am trying to take input from user where validation is needed and once it is validated goes to modal popup to confirm then submit process..

推荐答案

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

If HTML5 validation is supported, you do not need jQuery for validation.

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

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

If you want a custom validation message, the following should do:

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

:invalid伪类可用于向其应用自定义CSS.

The :invalid psuedo class can be used to apply custom CSS to it.

此链接包含一些示例.有关浏览器的支持，请参见 caniuse .

This link contains some examples. For browser support see caniuse.

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

For dropdowns, you may use the required attribute.

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

请注意，第一个选项必须为空白.有关将required应用于<select>的详细信息，请参见

Note that the first option has to be blank. For details on applying required to <select> see this question.

这篇关于我有一种表格，如果用户输入内容，则应检查输入框是否为空或否，并发出警报消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！