0

ここにある単純なフォーム検証プラグインを実装しようとしています：http ：//www.jquery4u.com/forms/basic-jquery-form-validation-tutorial/

しかし、私はそれを機能させることができないようです。

私は簡単な形をしています：

<form id="signupform" name="signupform" action="page" method="post" novalidate="novalidate">
<input type="text" id="signupusername" name="signupusername">
<input type="text" id="signupemail" name="signupemail">
<input type="password" id="signuppassword" name="signuppassword">
<input type="text" id="signupfirstname" name="signupfirstname">
<input type="text" id="signuplastname" name="signuplastname">
<input type="checkbox" name="tandc" value="tandcyes"> I agree
<button type="submit" value="Signup" class="submit">Signup</button>
</form>

そして、関連するプラグインスクリプト：

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript">
(function($,W,D)
{
    var JQUERY4U = {};

    JQUERY4U.UTIL =
    {
        setupFormValidation: function()
        {
            //form validation rules
            $("#signupform").validate({
                rules: {
                    signupusername: "required",
                    signupfirstname: "required",
                    signuplastname: "required",
                    signupemail: {
                        required: true,
                        email: true
                    },
                    signuppassword: {
                        required: true,
                        minlength: 5
                    },
                    tandcyes: "required"
                },
                messages: {
                    signupusername: "Please enter your User Name",
                    signupfirstname: "Please enter your firstname",
                    signuplastname: "Please enter your lastname",
                    signuppassword: {
                        required: "Please provide a password",
                        minlength: "Your password must be at least 5 characters long"
                    },
                    signupemail: "Please enter a valid email address",
                    tandcyes: "Please accept our policy"
                },
                submitHandler: function(form) {
                    form.submit();
                }
            });
        }
    }

    //when the dom has loaded setup form validation rules
    $(D).ready(function($) {
        JQUERY4U.UTIL.setupFormValidation();
    });

})(jQuery, window, document);

しかし、それはうまくいきません。

もちろん、プラグインとJQueryへのリンクの両方が存在して正しいことを確認しました。コンソールにも何も表示されません。トリガーされないようです。

誰かが何が起こっているのか知っていますか？

ありがとう！

4

2 に答える 2

3

問題は、同じスクリプトを2回含めたことです。

検証付きのスクリプトの関数は、ソースに2回表示されます。これは、ブラウザがどちらを選択するかを知るのがかなり難しいです。

2つのスクリプトがないかヘッドを確認してください。

フォームタグに存在しないフォームにすべての入力を追加してください。

<form>
<input type=... />
<input type=... />
</form>

入力の前にフォームを閉じると、それが問題になります。

于 2013-01-23T07:12:59.200 に答える
1

このページとその作品を使用する

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>


<title>Basic jQuery Validation Form Demo | jQuery4u</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css">

<script type="text/javascript">
(function($,W,D)
{
    var JQUERY4U = {};

    JQUERY4U.UTIL =
    {
        setupFormValidation: function()
        {
            //form validation rules
            $("#signupform").validate({
                rules: {
                    signupusername: "required",
                    signupfirstname: "required",
                    signuplastname: "required",
                    signupemail: {
                        required: true,
                        email: true
                    },
                    signuppassword: {
                        required: true,
                        minlength: 5
                    },
                    tandcyes: "required"
                },
                messages: {
                    signupusername: "Please enter your User Name",
                    signupfirstname: "Please enter your firstname",
                    signuplastname: "Please enter your lastname",
                    signuppassword: {
                        required: "Please provide a password",
                        minlength: "Your password must be at least 5 characters long"
                    },
                    signupemail: "Please enter a valid email address",
                    tandcyes: "Please accept our policy"
                },
                submitHandler: function(form) {
                    form.submit();
                }
            });
        }
    }

    //when the dom has loaded setup form validation rules
    $(D).ready(function($) {
        JQUERY4U.UTIL.setupFormValidation();
    });

})(jQuery, window, document);
</script>

</head>
<body>

<h1>Basic jQuery Validation Form Demo</h1>

<!-- HTML form for validation demo -->
<form id="signupform" name="signupform" action="page" method="post" novalidate="novalidate">

<input type="text" id="signupusername" name="signupusername">
<input type="text" id="signupemail" name="signupemail">
<input type="password" id="signuppassword" name="signuppassword">
<input type="text" id="signupfirstname" name="signupfirstname">
<input type="text" id="signuplastname" name="signuplastname">
<input type="checkbox" name="tandc" value="tandcyes"> I agree
<button type="submit" value="Signup" class="submit">Signup</button>

</form>
<!-- END HTML form for validation -->

</body>

</html>
于 2013-01-23T06:50:30.290 に答える