0

这是我第一次使用插件和 .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
                                        });
});

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

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

4

1 回答 1

2

你的整个问题是你的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/

查看所有回调函数的文档

编辑：

从 jQuery Mobile 版本 1.4 开始，该pageinit事件已被弃用并替换为pagecreate.

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

于 2013-07-08T14:55:55.867 回答