Deepak Jawalkar Deepak Jawalkar - 6 months ago 23
Javascript Question

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

Answer

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.