Add math verification to jquery validate form

Question

I have a contact form where I am trying to add a simple captcha of adding two numbers together and to also display the successMessage div when the form is sent. My form looks like this;

<form method="post" action="" id="contact">

<div id="successMessage" style="display:none;">Message sent</div>

<label for=name accesskey=U><span class="required">*</span> Your Name</label>
<input name="name" type="text" id="name" size="30" value="" />

<br />
<label for=email accesskey=E><span class="required">*</span> Email</label>
<input name="email" type="text" id="email" size="30" value="" />

<br />
<label for=phone accesskey=P><span class="required">*</span> Phone Number</label>
<input name="phone" type="text" id="phone" size="30" value="" />

<br />

<label for=comments accesskey=C><span class="required">*</span> Your Comments</label>
<textarea name="comments" cols="26" rows="8" id="comments"></textarea>

<hr />

<p style="margin:0px; padding:0px;"><span class="required">*</span>Are You Human?</p>

<label for=verify accesskey=V>3 + 1 =</label>
<input name="verify" type="text" id="verify" size="6" value="" />

<input name="contactus" type="submit" class="submit" id="contactus" value="Submit" />

</form>

<script type="text/javascript">
$(function() {

  $.validator.addMethod("verify", function(value, element, params) {
      return this.optional(element) || value == params[0] + params[1];
  }, jQuery.validator.format("Please enter the correct value for {3} + {1}"));

  $("#contact").validate({

      success: function(label) {
              label.hide();
      },  
      rules: {
          name: {required: true},
          email: {
            email: true,
            required: true
          },
          phone: {
            digits: true
          },
          comments: {required: true}
      },
      messages: {
          name: "Please tell us your Name",
          email: "Please enter a valid email address",
          comments: "Please enter your comments"
      }

  });
});
</script>

You can see that I have tried using the addMethod to verify that someone enters 4 into the verify field, but it's not validating the field.

I would be grateful if someone can help me out to get that to work and to also display a global success message when the form submits.

Thank you.

You have defined a method, but you haven't created a rule yet that uses the method. Check out http://stackoverflow.com/questions/241145/jquery-validate-plugin-how-to-create-a-simple-custom-rule and possibly change the name of your rule to not match the method (as it would have to be right now) to make it less confusing (I'm not 100% positive, because I can't test it at the moment, but I think all that is missing is a verify: { verify: true } in your rules block...) — UweB, Aug 02 '13 at 13:05
I would not do this verification via JavaScript. There is no place where you can put the code where it cannot be seen and easily bypassed. — Sparky, Aug 02 '13 at 16:45

score 0 · Answer 1 · edited Mar 07 '14 at 08:13

0

You specified the method, but you did not use it. Here is the simple fix in Javascript.

<script type="text/javascript">
$(function() {
  $.validator.addMethod("verify", function(value, element, params) {
      return this.optional(element) || parseInt(value, 10) == params[0] + params[1];
  }, jQuery.validator.format("Please enter the correct value for {0} + {1}"));
  $("#contact").validate({
      success: function(label) {
              label.hide();
      },  
      rules: {
          name: {required: true},
          email: {
            email: true,
            required: true
          },
          phone: {
            digits: true
          },
          comments: {required: true},
          verify:{
            verify:[3, 1]
          }
      },
      messages: {
          name: "Please tell us your Name",
          email: "Please enter a valid email address",
          comments: "Please enter your comments"
      }
  });
});
</script>

updated the error message so it is "{0} + {1}".
called verify method for verify field. I may use different names or may get confused between field and custom method.

edited Mar 07 '14 at 08:13

ndimatteo

498
5
22

answered Aug 02 '13 at 13:39

web2kx

71
5

Thank you. Is there a way to show the validation message when you click submit? Currently it shows all the other error messages but nothing for the verify field :/ – doubleplusgood Aug 02 '13 at 14:45
You already defined error message "Please enter the correct value for {0} + {1}". And it fires when verification answer is wrong. I have it working after code fix. What else message are you looking for? – web2kx Aug 02 '13 at 15:23
Hmm, weird. I copied your code exact. But when I click submit without filling anything in, error messages appear for name, email and comments but nothing for verify. – doubleplusgood Aug 02 '13 at 15:34
Ah, i just added in required: true for the verify rule. It then tells me 'This field is required'. Then if I enter the wrong answer, it tells me the 'Please enter the correct value for...' – doubleplusgood Aug 02 '13 at 15:37
@doubleplusgood, remove the `required` rule declaration and easily incorporate that same functionality into the custom method. Simply remove `this.optional(element) ||` and then the field will also be required when the `verify` rule is evaluated. See: http://jsfiddle.net/MJQBk/ – Sparky Aug 02 '13 at 16:43
Spot on Sparky. Thanks so much. Now i just need to figure how to show the "Message sent" when the form submits. – doubleplusgood Aug 02 '13 at 21:25
@doubleplusgood, use the plugin's `submitHandler` callback function for things like that. See it in my jsFiddle above. – Sparky Aug 02 '13 at 22:22

score 0 · Answer 2 · answered Mar 07 '14 at 08:09

Just letting everyone know that you need to parse the Integer because the value is a string. You're doing an equality so they both need to be integers.

Just wrap the 'value' with parseInt like this:

return this.optional(element) || parseInt(value, 10) == params[0] + params[1];

Add math verification to jquery validate form

2 Answers2