.validate() 在 jQuery Mobile 中不起作用

Question

这是我第一次使用插件和 .validate() 方法。现在我有一个表单，每次单击提交按钮时它都会运行而不进行表单验证。这是我的代码：

<form class="form d" method="post" action="">
                <input type="text" name="searchtitle" id="searchtitle" placeholder="Enter the textbook's title">
                <input type="text" name="searchauthor" id="searchauthor" placeholder="Enter the textbook's author">
                <input type="text" name="searchpublisher" id="searchpublisher" placeholder="Enter the textbook's Publisher">
                <input type="text" name="searchedition" id="searchedition" placeholder="Enter the textbook's edition">
                <select name="searchuniversity" id="searchuniversity"></select>
                <select name="searchuniversitycampus" id="searchuniversitycampus" ></select>
                <input type="submit" id ="searchsubmit" name="searchsubmit" value="Search">
            </form>

然后我有以下 Javascript：

$(document).on('pageinit',"#searchpage",
    //this funciton will carry out the things we need to do to carry out our search
    function(e)
        {
            e.preventDefault();

            $(".form.d").validate({
                rules: {
                    name: {
                    required: true
                    },
                    email: {
                    required: true,
                    email: true
                    },
                    comments: {
                    required: true,
                    minlength: 5,
                    nourl: true
                    }
                },
                messages: {
                    name: "Required Field",
                    email: "Valid Email Required",
                    comments: "Required Field + No URL's"
                }
          });           


            $("#searchsubmit").click(
                    function(e)
                    {
                                          //Do a lot of processing here
                                        });
});

就像我说的那样，我对进行格式验证和使用该函数非常陌生。

Here 是一个 jsFiddle 的问题。当您单击小提琴中的提交时，它会提醒“你好”，然后它会进行验证。如何阻止这种情况发生。即先验证第一个然后运行函数？

Answer 1

您的全部问题是您的click 处理程序。该插件已经内置了回调函数，将捕获提交按钮的click 事件。当表单有效时，使用submitHandler 触发函数。当表单无效时，使用invalidHandler 触发函数。

您的 jsFiddle 中已经有 submitHandler 回调，所以我重构了您的 jsFiddle 代码如下：

$(document).on('pageinit', function(){

    $('#myform').validate({ // initialize the plugin
        rules: {
            field1: {
                required: true
            },
            field2: {
                required: true
            }
        },
        submitHandler: function (form) {
            alert("hello");  // stuff to do when form is valid
            alert('valid form submitted'); // for demo
            return false; 
        },
        invalidHandler: function () {
            // stuff to do when form is invalid
            alert("invalid form");  // for demo
        }
    });

    // remove click handler
    // use the plugin's built-in callback functions instead
    //$("#test").click(function(){alert("hello")});

});

演示：http://jsfiddle.net/BTwaP/1/

See documentation for all callback functions

---

编辑：

As of jQuery Mobile version 1.4, the pageinit event has been deprecated and replaced with pagecreate.

很好的参考：https://stackoverflow.com/a/14469041/594235