jQuery validation issue

Question

I'm trying to get jQuery validate to work with my radio button form. However, I'm having trouble with getting it to work, the validation functionality isn't working at all, this is the code I'm working with:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $("#formq").validate();
});
</script>

<style type="text/css">
<!--

label.error {display: none;}

//-->
</style>
</head>

<body>

<form id="formq" name="formq" action="check.php" method="post">
    <fieldset>
        <input type="hidden" name="check_submit" value="1" />
        <label for="radio-1" tabindex="1" class="circle">Circle</label>
        <input type="radio" name="radio-button" id="radio-1" value="Circle" validate="required:true" />
        <label for="radio-2" tabindex="2" class="pentagon">Pentagon</label>
        <input type="radio" name="radio-button" id="radio-2" value="Pentagon" />
        <label for="radio-3" tabindex="3" class="triangle">Triangle</label>
        <input type="radio" name="radio-button" id="radio-3" value="Triangle" />
        <label for="radio-4" tabindex="4" class="hexagon">Hexagon</label>
        <input type="radio" name="radio-button" id="radio-4" value="Hexagon" />
        <label for="radio-5" tabindex="5" class="square">Square</label>
        <input type="radio" name="radio-button" id="radio-5" value="Square" />
        <label for="radio-6" tabindex="6" class="octagon">Octagon</label>
        <input type="radio" name="radio-button" id="radio-6" value="Octagon" />
        <label for="radio" class="error">Please select your gender</label>

        <input class="submit" type="submit" value="Submit"/>
        </fieldset>
</form>
</body>
</html>

msmafra · Accepted Answer · 2011-04-19 18:37:53Z

1

Names with "-"are not working. I didn't check the documentation, but the code below worked

$.validator.setDefaults({
submitHandler: function() { alert("submitted!"); }//gives an alert messagem when submitted
});
$(document).ready(function() {

$("#formq").validate({
rules: {
radiobutton: "required"
},
messages: {//to use custom messages
radiobutton: "This is needed, buddy!"    
}
});

});

If you use the way you did before, $("#formq").validate(), you can also use classes:

<input type="radio" class="required" />

edited Apr 19, 2011 at 18:37

answered Apr 19, 2011 at 17:13

msmafra

1,7143 gold badges21 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

msmafra Over a year ago

I don't know if it's only me, but that documentation is kind complicated to understand.

davidosomething · Accepted Answer · 2011-04-19 13:59:45Z

0

You haven't specified any rules for jQuery validate. Do it using CSS, jquery metadata, or in the function call. E.g. (not tested):

$("#formq").validate({ rules: 
    { 
        "radio-button" : { required : true }   
    } 
});

answered Apr 19, 2011 at 13:59

davidosomething

3,4372 gold badges28 silver badges33 bronze badges

2 Comments

INT Over a year ago

Hm, that didn't work atleast. Are you sure this is needed? The documentation doesn't mention it.

davidosomething Over a year ago

yea i said it wasn't tested. the key in the rules ("radio-button") should be the ID of the thing you're validating. I've never tried an input with a hyphen in the id, don't think hyphen is allowed in a key when using object notation.

msmafra · Accepted Answer · 2011-04-19 16:05:33Z

0

With this you can test if is checked or not and which one is checked:

$('.submit').bind('click',function() {
    if($("#formq input:radio").is(':checked')) {
        alert('true, value = '+$('#formq input:radio:checked').val());
    } else {
        alert('false');
    }
});

answered Apr 19, 2011 at 16:05

msmafra

1,7143 gold badges21 silver badges34 bronze badges

1 Comment

msmafra Over a year ago

Sorry I didn't see that you were using a plugin.

Collectives™ on Stack Overflow

jQuery validation issue

3 Answers 3

1 Comment

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Related