.validate()在jQuery Mobile中不起作用 [英] .validate() not working in jQuery Mobile

问题描述

这是我第一次使用plugin和.validate()方法.现在，我有了一个表单，每次单击提交"按钮时，表单都不会进行表单验证.这是我的代码:

It is my first time using the plugin and .validate() method. Now I have a form and every time I click the submit button it runs with out doing the form validation. Here is my code:

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

I then have the following 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
                                        });
});

就像我说的那样，我对进行形式验证和使用该功能还很陌生.

Like I said I'm very new to doing the forma validation and using the function.

此处是问题的jsFiddle.当您在提琴中单击提交"时，它会提示您好"，然后进行验证.如何阻止这种情况的发生.即首先验证1，然后再运行该功能?

Here is a jsFiddle of the problem. When you click on submit in the fiddle it alerts "hello" and then it does the validation. How to stop this from happening. i.e validate first 1st and then run the function?

推荐答案

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

Your whole problem is your click handler. The plugin already has callback functions built in that will capture the click event of the submit button. Use the submitHandler to fire a function when the form is valid. Use the invalidHandler to fire a function when the form is invalid.

您的jsFiddle中已经有submitHandler回调，因此我将jsFiddle代码重构如下:

You already have the submitHandler callback in your jsFiddle so I refactored your jsFiddle code as follows:

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

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

良好参考: https://stackoverflow.com/a/14469041/594235

这篇关于.validate()在jQuery Mobile中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！