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
On Jun 29, 9:06 am, Alexandre Magno <alexan...@gmail.com> wrote:
> 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
>
> On 29 jun, 00:03, Mac <amcint...@bigmate.com.au> wrote:
>
>
>
> > 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
>
> ...
>
> read more ยป
