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>
On Jun 26, 1:11 pm, Alexandre Magno <alexan...@gmail.com> wrote:
> 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 Developerhttp://blog.alexandremagno.net
>
> On Jun 25, 7:12 pm, Matt Riley <mattrileyiph...@gmail.com> wrote:
>
>
>
> > 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>
>
> > On Jun 25, 4:27 pm, Matt Riley <mattrileyiph...@gmail.com> wrote:
>
> > > 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
>
> > > On Jun 25, 3:16 pm, Lee R Lemon III <leerlemon...@gmail.com> wrote:
>
> > > > 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
> > > > }
> > > > }
>
> > > > )
>
> > > > On Jun 25, 2:35 pm, Matt Riley <mattrileyiph...@gmail.com> wrote:
>
> > > > > 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>
