How to check specific field is valid or not using jQuery validation plugin? [duplicate]

Question

I am trying to check specific form field is valid or not on button click event but not working.

I have included this jQuery library:

<script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script>

and jQuery code:

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
    $(function () {
        //The client side validations
        var validator = $("#form").validate({
            rules: {
                brokercat: {
                    required: true
                }
            },
            messages: {
                brokercat: {
                    required: "required"
                }
            },
        });
    });

    $(".next").click(function () {
        alert($("#brokercat").valid());
    }); 
});
</script>

HTML Code:

<form name="form" id="form" action="#">
    <div class="radio">
        <input name="brokercat" id="radiobtn" type="radio" name="radio" value="cat05">
        <label for="radiobtn">
            <p>My business would benefit from having more cash available.</p>
        </label>
        <input name="brokercat" id="radiobtn1" type="radio" name="radio" value="cat04">
        <label for="radiobtn1">
            <p>My business needs to buy a new piece of equipment.</p>
        </label>
        <input name="brokercat" id="radiobtn2" type="radio" name="radio" value="cat02">
        <label for="radiobtn2">
            <p>My business wants to buy the property that it already
                <br/>occupies or is looking to move into. Or, I am looking to buy
                <br/>a business and that includes the premises it occupies.</p>
        </label>
        <input name="brokercat" id="radiobtn3" type="radio" name="radio" value="cat06">
        <label for="radiobtn3">
            <p>I need to acquire a new vehicle for my business.</p>
        </label>
        <input name="brokercat" id="radiobtn4" type="radio" name="radio" value="cat07">
        <label for="radiobtn4">
            <p>I am looking to develop residential or commercial premises.</p>
        </label>
        <input name="brokercat" id="radiobtn5" type="radio" name="radio" value="cat08">
        <label for="radiobtn5">
            <p>I need to borrow for less than 12 months for a property transaction.</p>
        </label>
        <input name="brokercat" id="radiobtn6" type="radio" name="radio" value="cat03">
        <label for="radiobtn6">
            <p>I have outstanding invoices that I would like to use to raise
                <br/>some extra funding.</p>
        </label>
        <input name="brokercat" id="radiobtn7" type="radio" name="radio" value="cat09">
        <label for="radiobtn7">
            <p>I/we have a pension fund that we would like to consider
                <br/>using to raise some capital.</p>
        </label>
        <input name="brokercat" id="radiobtn8" type="radio" name="radio" value="cat01">
        <label for="radiobtn8">
            <p>I am looking to buy a property as an investment and to rent
                <br/>it out.</p>
        </label>
        <input name="brokercat" id="radiobtn9" type="radio" name="radio" value="cat10">
        <label for="radiobtn9">
            <p>My business is looking to help with its overseas trading and
                <br/>exporting.</p>
        </label>
        <input type="button" class="next" value="Next" />
    </div>
</form>

I am getting this error:

Any idea why it is not working.

Thanks.

Answer 1

There is no element in your code with ID as brokercat, #brokercat is an ID based selector. It is the name attribute.

Use

$("[name='brokercat']").valid()  //returns 0 or 1

---

$(".next").click(function () {
    alert($("[name='brokercat']").valid());
}); 

Demo

*Note : Make sure you include both jQuery and jQuery.validate.js references which are compatible.