Reputation: 13
I am working on javascript/jquery and i have following form and i want to validate without "validation engine",So how can i validate all fields together ? I tried with following code
async function completeListing(elm)
{
var type= $("input[name='selct-type']:checked").val();
var quantity= $("#number").val();
var price= $("#priice").val();
if(type=="")
{
$("#radio_error").show();
}
if(price=="")
{
$("#price_error").show();
}
if(quantity=="")
{
$("#quantity_error").show();
}
else
{
//further code
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="radio_error" style="display:none";>Please select any field</div>
<div class="select-type">
<div class="radio">
<input type="radio" name="selct-type" value="sell"/><label>Sell </label>
</div>
<div class="radio">
<input type="radio" name="selct-type" value="auction"/><label>Auction </label>
</div>
</div>
<div id="price_error" style="display:none";>Please enter your price</div>
<input class="form-control" placeholder="Price" id="priice" name="price" type="number" />
<div id="quantity_error" style="display:none";>Please enter quantity</div>
<input class="form-control" id="number" placeholder="quanity" type="number" name="quantity"/>
<input type="submit" name="listing" value="Complete listing" onclick="completeListing(this)" >
Upvotes: 1
Views: 79
Reputation: 84
You can use .prop('checked')
to validate the radio input. It returns true if button is checked otherwise false.
async function completeListing(elm)
{
var type= $("input[name='selct-type']").prop('checked');
var quantity= $("#number").val();
var price= $("#priice").val();
if(type==false)
{
$("#radio_error").show();
}
if(price=="")
{
$("#price_error").show();
}
if(quantity=="")
{
$("#quantity_error").show();
}
else
{
//further code
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="radio_error" style="display:none";>Please select any field</div>
<div class="select-type">
<div class="radio">
<input type="radio" name="selct-type" value="sell"/><label>Sell </label>
</div>
<div class="radio">
<input type="radio" name="selct-type" value="auction"/><label>Auction </label>
</div>
</div>
<div id="price_error" style="display:none";>Please enter your price</div>
<input class="form-control" placeholder="Price" id="priice" name="price" type="number" />
<div id="quantity_error" style="display:none";>Please enter quantity</div>
<input class="form-control" id="number" placeholder="quanity" type="number" name="quantity"/>
<input type="submit" name="listing" value="Complete listing" onclick="completeListing(this)" >
Upvotes: 1