jquery validation plugin - not validating on submit

问题

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 file with my js. I see via Firebug they are all loading. If I use the code below, it does not validate at all - the form submits, and I get mysql errors because I don't have fields filled out. Here is the js code:

    $("#untForm").validate({
     onfocusout: true,
    rules: {
        attachment: {
            required: "false",
            accept: "jp?g,png,gif,txt"
        },
        recipient: {
            required: "true"
        },
        messageInput: { 
            required: "true"
        },
        cc_email: {
            email: "true"
        }
    },
    messages: {
        attachment: {
            accept: "Only image type jpg/png/jpeg/gif and .txt are allowed"
        },
        recipient: {
            required: "Please enter a recipient"
        },
        messageInput: {
             required: "Please enter a message"
        },
        cc_email: {
            email: "Please enter a valid email address"
        }
    },
    });

If I add this piece of code in the beginning:

$("#untForm").submit(function() {

it validates on submit - all but the cc_email field. This never gets validated. All my form fields have a name attribute. This seems like I must be missing something simple, but I've spent hours looking at this, and other Q&A on this form. Can anyone see what I'm dong wrong?

Part of the html markup:

<form action=""  id="untForm" enctype="multipart/form-data"  class="general" method="post" >
    <h1>Send a Message</h1>
    <hr color="#ff6C00" width="100%"><br>
    <label for="recipient">To: <span>(required)</span></label>
        <input type="text" name="recipient"  id="recipient" class="form-input" "required" />
<label for="attachment">Attachment: <span>(optional)</span></label>
<img src="images/paperclip.png" width="32px"><input type="file" name="attachment" id="attachment" /></img>
                                                   <label for="cc_email">Cc: <span>(optional)</span></label>
   <input type="text" name="cc_email" id="cc_email" class="form-input" />
                                                       <textarea id="messageInput" class="form-input" name="messageInput" cols="30" rows="30" required></textarea>

    <input class="form-btn" type="submit" value="Submit Form" />

回答1:

You have several problems...

"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.

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.)
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.
The rules with boolean parameters, such as required, do not get quotation marks around the true parameter.
```
required: true
```
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.
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/
When you use the accept or extension rules, you must include the additional-methods.js file, just in case you haven't.
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.

<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>

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.

回答2:

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.

来源：https://stackoverflow.com/questions/23979651/jquery-validation-plugin-not-validating-on-submit

标签

jquery

jquery-validate