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

Question

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

if i click submit it is taking negative input and and blank dropdown as well? — Deepak Jawalkar, May 12 '16 at 15:41
this is so much better and easier with the jquery validation plugin https://plugins.jquery.com/validation/ — rleir, May 12 '16 at 15:43

score 1 · Accepted Answer · edited May 23 '17 at 11:52

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('')">

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

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

EDIT:

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>

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

But wt about dropdown how to check the the input to validate? — Deepak Jawalkar, May 12 '16 at 16:50
Edited the answer. Added how to use `required` for dropdown validation. — Chintan, May 12 '16 at 17:53

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

1 Answers1

Linked