我确实有一个表单,如果用户输入了输入,它应该检查否定或空的输入框,并抛出一条警告消息

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

本文关键字:输入 警告 消息 一条 表单 有一个 如果 用户 检查      更新时间:2023-09-26

下面是我的代码。我确实有一个表格,其中包括三个下拉列表和输入框。所以我确实想检查一个字段是空白的还是输入了负数?

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

我试图在需要验证的地方接受用户的输入,一旦验证成功,就会进入模式弹出窗口进行确认,然后提交流程。。

如果支持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

此链接包含一些示例。有关浏览器支持,请参阅犬科动物。

编辑:

对于下拉列表,可以使用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>的详细信息,请参阅此问题。

相关文章: