Response title
This is preview!
Move this topic
[jQuery] (validate) Radio button values
in Using jQuery
•
14 years ago
I'm making a simple quiz using jquery and the validate plug-in. I
think I'm really close but just need a nudge over the last hump. :-)
I have a radio button group that requires the user to select at least
one button. That part is working. However, what I want to do is also
check to see if the user selected a certain button (i.e. the correct
answer). Only if the correct answer is satisfied will the form then
validate and move on to the next quiz question.
Here's my code so far. Any help is greatly appreciated.
<script type="text/javascript">
$.validator.setDefaults({
submitHandler: function() {
alert("Submitted!");
}
});
$.metadata.setType("attr", "validate");
$(document).ready(function() {
$("#quiz_form").validate();
});
</script>
</head>
<body>
<div id="main">
<form class="cmxform" id="quiz_form" method="get" action="">
<fieldset>
<fieldset>
<label for="answer1">
<input type="radio" id="answer1" value="1" name="answers"
validate="required:true" />
Answer 1
</label>
<label for="answer2">
<input type="radio" id="answer2" value="2" name="answers" />
Answer 2
</label>
<label for="answer3">
<input type="radio" id="answer3" value="3" name="answers" />
Answer 3
</label>
<label for="answer4">
<input type="radio" id="answer4" value="4" name="answers" />
Answer 4
</label>
<label for="answers" class="error">Please select an answer.</label>
</fieldset>
<input class="submit" type="submit" value="Check Answers"/>
</fieldset>
</form>
</div>
</body>
</html>
Replies(10)
Re: [jQuery] (validate) Radio button values
14 years ago
well like many things this has a variable answer...
but what I think you will need to do is write a script that gets the
correct answer (I would use ajax calls to server so the answer can not
be seen in the browser code)
then set an event on the submit button that cycles through your radio
buttons for the correct answer easiest way to do that is add a class
to each and do something sorta like..
//outside a function (before your document.ready as well)
var correctanswer;
//somewhere set the value of correctanwser
$('.your_class').each(
function(){
var temp_val = $('.your_class').val();
var temp_id = $('.your_class').attrib('id');
if(temp_val=='selected'){
if(temp_id == correctanswer){
//code for correct answer here
}
else{
//code for wrong answer here
}
}
)
Leave a comment on leerlemoniii1's reply
Re: [jQuery] (validate) Radio button values
14 years ago
Thanks for your reply. I'm going to give it a go with what you
suggested, although I'm not exactly a seasoned pro at this so I will
probably get stuck and come back begging for more help. :-)
I should have mentioned that this thing needs to run locally from a
user's hard disk without a requirement for server-side processing. If
this was not the case, I would've probably pursued a php solution as
I'm slightly more comfortable with that (jquery is very new to me). It
doesn't much matter if the correct answer is hidden in the source of
the page somewhere; these quizzes will just be used for basic users
who wouldn't know/care to look in the source anyway.
Again, thank you for your reply. I'll probably be back. LOL.
-Matt
Leave a comment on Matt Riley's reply
Re: [jQuery] (validate) Radio button values
14 years ago
Yeah, like I thought, I'm back again. ;-)
Below is the code I've been cobbling together from your previous post.
Please feel free to slap me around and tell me where I've done bad.
Right now, the form validation works fine (if there is nothing
selected then the jquery validation comes up). However, when I hit the
submit button, nothing happens. I'm sure I've screwed something up
royally but I'm not an experienced enough programmer to figure it all
out before the sun dies.
<script type="text/javascript">
$.validator.setDefaults({
submitHandler: function() {
var correctAnswer = 1
$('.theAnswer').each(
function(){
var temp_val = $('.theAnswer').val();
var temp_id = $('.theAnswer').attrib('id');
if(temp_val=='selected'){
if(temp_id == correctanswer){
alert("Correct!");
}
else{
alert("Try Again.");
}
}
});
}
});
$.metadata.setType("attr", "validate");
$(document).ready(function() {
$("#quiz_form").validate();
});
</script>
</head>
<body>
<div id="main">
<form class="cmxform" id="quiz_form" method="get" action="">
<fieldset>
<fieldset>
<label for="answer1">
<input name="answers" type="radio" class="theAnswer"
id="answer1" value="1" validate="required:true" />
Answer 1
</label>
<label for="answer2">
<input name="answers" type="radio" class="theAnswer" id="answer2"
value="2" />
Answer 2
</label>
<label for="answer3">
<input name="answers" type="radio" class="theAnswer" id="answer3"
value="3" />
Answer 3
</label>
<label for="answer4">
<input name="answers" type="radio" class="theAnswer" id="answer4"
value="4" />
Answer 4
</label>
<label for="answers" class="error">Please select an answer.</
label>
</fieldset>
<input class="submit" type="submit" value="Check Answers" />
</fieldset>
</form>
</div>
</body>
</html>
Leave a comment on Matt Riley's reply
Re: [jQuery] (validate) Radio button values
14 years ago
Hello,
If you need a simple solution to this you should consider create a new
validation rule for the validate plugin, it's easy...
this it's a example how to create a rule to verify its the age its
greater than 18:
jQuery.validator.addMethod("minAge", function(value, element, params)
{
return this.optional(element) || value > params;
}, "You should be greater than 18 to enter in this website");
So you should create a rule that you pass for example the right
answear in rule an then will be checked all throught the validate
This rule you created with the syntax above could be added in
additional.methods.js that cames with the validate plugin
it was clear?
Alexandre Magno
Interface Developer
http://blog.alexandremagno.net
Leave a comment on alexanmtz's reply
Re: [jQuery] (validate) Radio button values
14 years ago
Alexandre, this sounds like it would do pretty much what I need. I
followed your post but I can't seem to get it working. Can you look at
the code below and tell me where I've gone wrong? Sorry to ask for all
the help but I think I'm kind of close and I just want to get it
done! :-)
<script type="text/javascript">
jQuery.validator.addMethod("correctAnswer", function(value, element,
params) {
return this.optional(element) || value > params;
}, "Select the correct answer to move on.");
$.validator.setDefaults({
submitHandler: function() {
alert("Go to next question.");
}
});
$.metadata.setType("attr", "validate");
$(document).ready(function() {
$("quiz_form").validate({
rules: {
answer1: "required"
}
});
});
</script>
</head>
<body>
<div id="main">
<form class="cmxform" id="quiz_form" method="get" action="">
<fieldset>
<fieldset>
<label for="answer1">
<input type="radio" id="answer1"
value="1" name="answers" />
Answer 1
</label>
<label for="answer2">
<input type="radio" id="answer2"
value="2" name="answers" />
Answer 2
</label>
<label for="answer3">
<input type="radio" id="answer3"
value="3" name="answers" />
Answer 3
</label>
<label for="answer4">
<input type="radio" id="answer4"
value="4" name="answers" />
Answer 4
</label>
<label for="answers" class="error">Please
select an answer.</label>
</fieldset>
<input class="submit" type="submit"
value="Check Answers"/>
</fieldset>
</form>
</div>
</body>
</html>
Leave a comment on Matt Riley's reply
Re: [jQuery] (validate) Radio button values
14 years ago
Heya Matt
Looks like you have created the custom method for the validation, but
you are not calling it anywhere. You are still setting the validation
method to be the default "required".
You need to add the method as a class to the element (as you did
originally) or specify it as a rule in the $.ready() call to validate
().
I'm also not entirely sure that your custom method will produce the
results you expect (haven't tested it).
If you struggle with that - try the following:
jQuery.validator.addMethod("correctAnswer", function(value, element,
params) {
var radioValue = $("#main").find("input[type='radio']").val(); //
returns the selected value from the radio button group
return this.optional(element) || value > params;
}, "Select the correct answer to move on.");
In order to provide a value for params you need to call the method in
the following manner:
<input class="{correctAnswer:'1'}" type="radio" id="answer1"
value="1" name="answers" /> (if you want the radio with a value of 1
to be the valid answer)
or
$("quiz_form").validate({
rules: {
correctAnswer:'1'
}
});
Hope that helps a little!!! Anyone reading your code will be able to
descern the correct answer though. Are you able to make ajax calls to
the server? The validate plugin provides a remote method that you pass
a php.asp url and return true/false to validate. That would be far
better.
Leave a comment on amcintyre1's reply
Re: [jQuery] (validate) Radio button values
14 years ago
Matt,
You litteraly used the custom validation rule that I gave just for
example, it was to follow that line, but that method it's to verify if
that field it's greater than a number, used for minAge.
so when I put:
rules: {
minAge: 18
}
If you analyze, they return if the value it's greater that you passed
at "return this.optional(element) || value > params;"
I made this for you understand how works and not to make the whole
code, before this parte you have to implement like Mac made, but still
not right, I thing the follow code should work but I didint tested:
* Mac, you start to implement but you use a given id in a given radio,
the custom method receive the value of the field, you don't need to
tie in a given id, it can be general like below
jQuery.validator.addMethod("correctAnswer", function(value, element,
params) {
return this.optional(element) || value == params;
}, "Select the correct answer to move on.");
So you can make:
$("quiz_form").validate({
rules: {
correctAnswer: 1
}
});
And the method will check if the value selected in radio is the same
that the parameter you pass, this case 1
I hope this should help and work for you
They return if the field it's greater in the syntax
Leave a comment on alexanmtz's reply
Re: [jQuery] (validate) Radio button values
14 years ago
Thanks guys. I really appreciate all the help.
I'm still stuck, though. I can't get anything to work now, although I
can't seem to figure out why. I'm definitely not a programmer, so
please be gentle, though feel free to explain things to me like I'm a
5 year-old. I won't be offended. :-)
Here's where I'm at after trying to integrate your posts. Again, this
code doesn't produce any results, so I'm really stuck.
<script type="text/javascript">
jQuery.validator.addMethod("correctAnswer", function(value, element,
params) {
var radioValue = $("#main").find("input[type='radio']").val(); //
returns the selected value from the radio button group
return this.optional(element) || value > params;
}, "Select the correct answer to move on.");
$.validator.setDefaults({
submitHandler: function() {
alert("Go to next question.");
}
});
$.metadata.setType("attr", "validate");
$(document).ready(function() {
$("quiz_form").validate({
rules: {
correctAnswer: 1
}
});
});
</script>
</head>
<body>
<div id="main">
<form id="quiz_form" method="get" action="">
<fieldset>
<fieldset>
<label for="answer1">
<input class="{correctAnswer:'1'}" type="radio" id="answer1"
value="1" name="answers" />
Answer 1
</label>
<label for="answer2">
<input type="radio" id="answer2" value="2" name="answers" />
Answer 2
</label>
<label for="answer3">
<input type="radio" id="answer3" value="3" name="answers" />
Answer 3
</label>
<label for="answer4">
<input type="radio" id="answer4" value="4" name="answers" />
Answer 4
</label>
<label for="answers" class="error">Please
select an answer.</label>
</fieldset>
<input class="submit" type="submit"
value="Check Answers"/>
</fieldset>
</form>
</div>
</body>
</html>
All I want to be able to do is present the user with four answers and
force the user to pick the correct answer before being allowed to move
to the next question. It doesn't matter if the answer is in the code
as the target for this is NOT the type who would open up the source
and go through it. :-)
-Matt
Leave a comment on Matt Riley's reply
Re: [jQuery] (validate) Radio button values
14 years ago
Hi Matt
Sorry, I omitted to change the variable you are comparing the value of. Ie
return this.optional(element) || value > params;
should read >
return this.optional(element) || radioValue > params;
Also stick a breakpoint where the variable is created and just make sure it is actually populated. Should be - but be sure!! Hope that helps Matt!!
Regards,
Alletha
-----Original Message-----
From: jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] On Behalf Of Matt Riley
Sent: Tuesday, 30 June 2009 2:27 AM
To: jQuery (English)
Subject: [jQuery] Re: (validate) Radio button values
Thanks guys. I really appreciate all the help.
I'm still stuck, though. I can't get anything to work now, although I
can't seem to figure out why. I'm definitely not a programmer, so
please be gentle, though feel free to explain things to me like I'm a
5 year-old. I won't be offended. :-)
Here's where I'm at after trying to integrate your posts. Again, this
code doesn't produce any results, so I'm really stuck.
<script type="text/javascript">
jQuery.validator.addMethod("correctAnswer", function(value, element,
params) {
var radioValue = $("#main").find("input[type='radio']").val(); //
returns the selected value from the radio button group
return this.optional(element) || value > params;
}, "Select the correct answer to move on.");
$.validator.setDefaults({
submitHandler: function() {
alert("Go to next question.");
}
});
$.metadata.setType("attr", "validate");
$(document).ready(function() {
$("quiz_form").validate({
rules: {
correctAnswer: 1
}
});
});
</script>
</head>
<body>
<div id="main">
<form id="quiz_form" method="get" action="">
<fieldset>
<fieldset>
<label for="answer1">
<input class="{correctAnswer:'1'}" type="radio" id="answer1"
value="1" name="answers" />
Answer 1
</label>
<label for="answer2">
<input type="radio" id="answer2" value="2" name="answers" />
Answer 2
</label>
<label for="answer3">
<input type="radio" id="answer3" value="3" name="answers" />
Answer 3
</label>
<label for="answer4">
<input type="radio" id="answer4" value="4" name="answers" />
Answer 4
</label>
<label for="answers" class="error">Please
select an answer.</label>
</fieldset>
<input class="submit" type="submit"
value="Check Answers"/>
</fieldset>
</form>
</div>
</body>
</html>
All I want to be able to do is present the user with four answers and
force the user to pick the correct answer before being allowed to move
to the next question. It doesn't matter if the answer is in the code
as the target for this is NOT the type who would open up the source
and go through it. :-)
-Matt
Leave a comment on amcintyre1's reply
Re: [jQuery] (validate) Radio button values
14 years ago
Matt,
How I said, you should try:
jQuery.validator.addMethod("correctAnswer", function(value, element,
params) {
return this.optional(element) || value == params;
}, "Select the correct answer to move on.");
So you can make:
$("quiz_form").validate({
rules: {
correctAnswer: 1
}
});
Just these 3 lines for the additional method to make things work...
Leave a comment on alexanmtz's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to Matt Riley's discussion