Validate Plugin - Form submitted to server side with a blank value but passing client side rules

Validate Plugin - Form submitted to server side with a blank value but passing client side rules

Hi All,

I'm using the jQuery validate plugin (v 1.9) for a contact form on a site. The contact form is really simple, 3 fields, name (input), email(input), enquiry(textarea).

The form has on a few occasions been allowed to submit (passing the client side rules) but not providing a value to the server side for the email field. I'm confident there is no issue passing the data (as it works 99% of the time) and also that these aren't hacky/bot/js disabled attempts, as the rest of the content is legitimate, just the email appears empty.

I just wanted a sanity check to make sure I was using the plugin correctly, and also any ideas as to how someone would have managed to submit the form without providing valid content for the email field.

Code samples:

  1. <form id="contact" action="#" name="contact" hidden="true" novalidate="novalidate" style="display: block; ">
  2. <p><strong>General Enquiry</strong></p>
  3. <dl>
  4. <dt><label for="name">Name</label></dt>
  5. <dd>
  6. <input id="name" class="required" type="text" name="name"></dd>
  7. </dl>
  8. <dl>
  9. <dt><label for="email">Email</label></dt>
  10. <dd>
  11. <input id="email" class="required" type="text" name="email"></dd>
  12. </dl>
  13. <dl>
  14. <dt><label for="enquiry">How can we help?</label></dt>
  15. <dd><textarea id="enquiry" class="required" name="enquiry" rows="8" cols="50"></textarea></dd>
  16. </dl>
  17. <input id="submit" class="sendButton" type="submit" value="Send">
  18. </form>
My JS for the validation:

  2. //setup the client side form validation
  3. $("#contact").validate({
  4. rules: {
  5. name: { required: true, minlength: 3 },
  6. email: { required: true, email: true },
  7. enquiry: { required: true, minlength: 5 }
  8. },
  9. messages: {
  10. name: "Please enter your name",
  11. email: "Please enter a valid email address",
  12. enquiry: "Please enter you enquiry detail"
  13. }
  14. });
And my form submission code:


  2. //bind the submit event on the form
  3. $('#contact').submit(function(e) {

  5. //if the form is valid
  6. if($("#contact").valid()) {
  8. //get the data from the form, TODO: use serialise here
  9. var name = $('input[name=name]').val();
  10. var email = $('input[name=email]').val();
  11. var enquiry = $('textarea[name=enquiry]').val();
  12. var data = '&type=' + type + '&name='+ name + '&email=' + email + '&enquiry=' + enquiry;  
  14. //send the Ajax request
  15. $.ajax({  
  16. type: "POST",  
  17. url: "myUrl.php",  
  18. data: data,  
  19. success: function() {
  20. $('#contact').html("<div id='message'></div>");  
  21. $('#message').html("<h3>Contact Form Submitted</h3>")  
  22. .append("<p>We will be in touch soon, thank you for your time.</p>")  
  23. .hide()  
  24. .fadeIn(1500)  
  25. }  
  26. }); //end ajax request

  28. e.preventDefault();
  29. return false;
  30. } //end if valid block
  31. }); //end submit handler
Does anything here look out of place?