Question

问候，

任何人都可以告诉我在下面的代码中我做错了什么。它没有在Click上执行。我很安静，请确保$("form").validate on适用于提交按钮：

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>

Answer 1

比onClick好，我认为是在表单提交：

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

Answer 2

据我所知，您的<input>字段没有ID，验证功能会将这些名称与<input>字段中的ID匹配。另外，我在<form>字段周围看不到任何<input>标记，因此您无法说$("form")....

编辑：

您的按钮不需要click事件，因为插件会在点击提交按钮时自动处理。
每个输入字段都需要一个id
您需要包含验证插件的jQuery库
您需要在输入字段周围添加<form>标记

看看这个：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>

JQUery验证未在Click事件上执行

2 个答案: