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.
On Jun 27, 6:09 am, Matt Riley <mattrileyiph...@gmail.com> wrote:
> 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
> > > > > >
>
> ...
>
> read more »
