Use jquery validate() to with radio buttons and javascript variables

Question

Im new to the jquery validate() plugin and I'm kind of lost here. So, what I want to do is to check if the selected radio button is equal to a variable:

So, lets say I have this in the form:

<input name = "radio_btns" value = "five" type = "radio">5
<input name = "radio_btns" value = "eight" type = "radio">8

I want to validate it to make sure the "five" option is selected, and I want to use a Javascript variable. I tried this, it is kind of obvious it won't work, anyway:

<script>
var required_answer = "five";
$(document).ready(function(){
$('#theform').validate({
    rules: {
        radio_btns: {
            required: true,
            equalTo: required_answer        <--- problem here ¬.¬
        }
...
</script>

Thanks in advance for your help.

you always want to make sure only Five shuld be selected correct? — Pratik Joshi
– Pratik Joshi, Commented Jul 17, 2014 at 5:08
No, sometimes it will be a different option. But it will be useful to know how to check Five is selected in the first place, I'm lost in their documentation. — Alejandro Veintimilla
– Alejandro Veintimilla, Commented Jul 17, 2014 at 5:10
Please tell what else u want other than this fiddle jsfiddle.net/NX43L — Pratik Joshi
– Pratik Joshi, Commented Jul 17, 2014 at 5:26
Did u check here jqueryvalidation.org/equalTo-method ? EqualTo means to check values of Two inputs (say Textboxes). Just like PASSWORD, and PASSWORD again .Both should hav same value ,so password_again will have attribute equalTo pointing towards password . — Pratik Joshi
– Pratik Joshi, Commented Jul 17, 2014 at 5:31

Pratik Joshi · Accepted Answer · 2014-07-17 05:56:49Z

Working fiddle

Use following custom method

//HTML

<form id="theform">
    <input name = "radio_btns" value = "five" type = "radio"/>5
    <input name = "radio_btns" value = "eight" type = "radio"/>8

    <input type="submit"/>
</form>

//jQuery part

Check here the value of Radio button user selected is "Five" , if its five then return TRUE else FALSE . So if true returned then Submit form (or say if Five selected) ,else Dont .

$(document).ready(function(){

jQuery.validator.addMethod("selectFive", function(value, element) 
{    var required_answer = "five";
    if(value == required_answer) {
        return true;
    }else{
        return false;
    }
}, "Please select five.");    

// validate the comment form when it is submitted
    $("#theform").validate({
        errorElement: 'div',
        rules: {

            radio_btns: {
                required: true,
                selectFive: true            

            }
        },
        messages: {

            radio_btns: {
                required: "Please select."  
            }

        },
        errorPlacement: function(error, element) {
            error.appendTo( element.parent() );
        },

        submitHandler: function(form) {
            jQuery('input[type=submit]', form).attr('disabled', 'disabled');            
            form.submit();

        }
    });
});

Collectives™ on Stack Overflow

Use jquery validate() to with radio buttons and javascript variables

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related