JQUery Validate not executed on Click Event_问答_开发者

JQUery Validate not executed on Click Event

开发者 https://www.devze.com 2023-02-20 10:31 出处：网络

greetings, Could any one tell me what am I doing wrong on code below. It\'s not executing on Click. I\'m quiet note sure wether $(\"form\").validate on applies to Submit button:

相关专题：jquery

greetings,

Could any one tell me what am I doing wrong on code below. It's not executing on Click. I'm quiet note sure wether $("form").validate on applies to Submit button:

jQuery:

        $(document).ready(function () {
            //Form Submit
            $('#ClockOutBtn').click(function () {
                $("form").validate({
                    rules: {
                        name: "required", // simple rule, converted to {required:true}
                        email: {// compound rule
                            required: true,
                            email: true
                        },
                        url: {
                            url: true
                        },
                        comment: {
                            required: true
                        }
                    },
                    messages: {
                        comment: "Please enter a comment."
                    }
                });
            });



        });

HTNML:

<fieldset>
        <div class="form-row"><span class="label">Name *</span><input type="text" name="name" /></div>
      <div class="form-row"><span class="label">E-Mail *</span><input type="text" name="email" /></div>
      <div class="form-row"><span class="label">URL</span><input type="text" name="url" /></div>
      <div class="form-row"><span class="label">Your comment *</span><textarea name="comment" ></textarea></div>

      <button id="ClockOutBtn" type="button"/>
开发者_如何学编程    </fieldset>

better than onClick I think is on form submit:

    $("form").bind('submit',function(){
        this.validate( etc... )
        if(valid_criteria)
            return true // submit
        else
            return false // don't submit
    })

As far as I see, your <input> fields have no IDs and the validate function matches the names with the IDs from the <input> fields. Also I don't see any <form> tag around your <input> fields so you can't say $("form")....

EDIT:

You don't need a click Event for your button, because the plugin handle this automatically when the submit button is clicked.
each input field needs an id
you need to include the jQuery library for the validate plugin
you need to have a <form> tag around your input field

Have a look at this: jsfiddle

jQuery:

$(document).ready(function () {



    $("#ClockOutBtn").click(function(){
        $("#testForm").validate({
                     rules: {
                         name: "required", // simple rule, converted to {required:true}
                         email: {// compound rule
                             required: true,
                             email: true
                         },
                         url: {
                             url: true
                         },
                         comment: {
                             required: true
                         }
                     },
                     messages: {
                         comment: "Please enter a comment."
                     }
                 });
    });

});

HTML:

<html>
    <head>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.js"></script>
    </head>
    <body>

        <form id="testForm">
<fieldset>
        <div class="form-row"><span class="label">Name *</span><input type="text" name="name" id="name" /></div>
      <div class="form-row"><span class="label">E-Mail *</span><input type="text" name="email" id="email" /></div>
      <div class="form-row"><span class="label">URL</span><input type="text" name="url" id="url" /></div>
      <div class="form-row"><span class="label">Your comment *</span><textarea name="comment" id="comment" ></textarea></div>

    <button id="ClockOutBtn">Test</button>


    </fieldset>
        </form>
        </body>
        </html>