单击事件时未执行JQUery验证

您好

有人能告诉我我在下面的代码上做错了什么吗。它不是在单击时执行的。我很安静注意到$form.validate是否适用于提交按钮：

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."
                    }
                });
            });



        });

$(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."
                     }
                 });
    });

});

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>

---

我认为比onClick更好的是表单提交：

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

据我所见，您的字段没有ID，validate函数将名称与字段中的ID相匹配。而且我在你的字段周围没有看到任何标记，所以你不能说$form

编辑：

您的按钮不需要单击事件，因为当单击submit按钮时，插件会自动处理该事件。 每个输入字段都需要一个id 您需要包含用于验证插件的jQuery库 您需要在输入字段周围有一个标记 看看这个：

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."
                    }
                });
            });



        });

$(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:

---

谢谢，但我不能有提交类型按钮。它需要一个图像不能显示在这里，因为它说垃圾邮件。它需要是图像的点击事件。提交按钮也可以设置为图像样式。您需要通过css包含一个背景图像。这是一个mvc应用程序，我没有将表单标记放在实际的web应用程序中。我想在用户单击图像时验证表单。我不能使用“提交”按钮，因为我还没有弄清楚如何在“提交”按钮上放置图像。我更改了答案，以便该示例可以在“单击事件”上运行。