jquery validation plugin - not validating on submit

Question

I\'ve got a form with several fields, some of which I\'d like to have validated on keyup and on submit. I am calling jquery 1.9.1 then the plugin (1.11.1), then an external fil

Answer 1

I was tearing my hair out for over an hour with a similar issue (the email field was not being validated). I figured there must be something wrong with my HTML markup and upon examining the demos, found that they were using an input type="email" to capture the input. I was using a regular text input. Making the change solved my problem.

Answer 2

You have several problems...

1. "If I add this piece of code in the beginning:" $("#untForm").submit(function() {

You absolutely do not need to add a submit handler. The plugin already captures the click of the submit button and handles everything automatically.

2. Your code must be enclosed within a DOM ready handler to ensure the HTML markup for the form exists when you call the .validate() method. (This omission explains why nothing was working until you enclosed it within a submit() handler.)

3. The onfocusout option is activated by default. As per the documentation, setting it to true "is not a valid value". (Setting it to true can break things.) If you want this option, you must leave out onfocusout: true because it's already the default.

4. The rules with boolean parameters, such as required, do not get quotation marks around the true parameter.

   required: true
   

5. Not sure why you have required: false on the attachment field. If you don't specify the required rule, then the field is not required (it's optional). There's no purpose in setting it to false when leaving it out achieves the same.

6. Based on your parameters of "jp?g,png,gif,txt", I'm not sure you intended to use the accept rule, which is for MIME Types. Those look like file extensions, and in that case, you should be using the extension rule instead. If that's the case, they need to be separated with a | character. See: http://jqueryvalidation.org/extension-method/

7. When you use the accept or extension rules, you must include the additional-methods.js file, just in case you haven't.

8. Not sure what you meant by "not validated" on the cc_email field. You've only defined the email rule so when you enter an non-email address, it will give you an error. However, you did not specify the required rule so this field will be optional. If you want it mandatory, then add required.

   cc_email: {
       required: true,
       email: true
   }
   

DEMO: http://jsfiddle.net/ca2Rd/

DEMO with your markup: http://jsfiddle.net/mECS9/

---

HTML markup issues.

1. <img> elements are not containers, do not have a closing tag, and you cannot put other elements inside of them. They are stand-alone and self-closing, similar to a <br /> tag.

NOT valid: <img> ... </img>

NOT valid: <img></img>

Valid: <img />

Valid: <img>

2. You do not need the required attribute inside of the <textarea> tag since you've already defined the required rule inside of your .validate() method.

---

Quote OP:

"... and I get mysql errors because I don't have fields filled out ..."

This is a very serious problem. Client-side validation by JavaScript or jQuery, can routinely be bypassed, broken or disabled. Therefore, you should NEVER rely on any client-side code to protect your database from errors.

You absolutely must have code on your server-side that also validates the incoming data and therefore will always protect your database from errors, even when the client-side validation fails in any fashion.

• Client-side validation is for avoiding frequent page reloads, for a more pleasant GUI and user experience, etc.

• Server-side validation is for protecting your database whenever client-side validation fails.

You should have both, but absolutely do not go without "server-side" validation. In other words, client-side validation is only an enhancement to server-side validation, never a replacement.