How to validate jquery validation together

February 7, 2023

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

Here is my form fields

<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" id="priice" name="price" type="number" />

<div id="quantity_error" style="display:none";>Please enter quantity</div>
<input class="form-control" id="number" type="number" name="quantity"/>
<input type="submit" name="listing" value="Complete listing" onclick="completeListing(this)" >

>Solution :

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