-1

これについては以前に投稿しましたが、jQuery 検証プラグインがソリューションになる可能性に非常に興奮していました。多分私は何かが足りないだけです...

私がやりたいことは、jQuery を使用.load()してフォームを div にロードし、jQuery 検証プラグインを使用してページを検証することです。私のページは jQuery で 100% 動作する.load()ため、jQuery フォームの検証以外はすべて動作しています。通常の静的ページでは検証プラグインがうまく機能しましたが、それを使用して既存のサイトに実装しようとすると.load()、期待どおりに機能しなくなります。

jQuery が送信時に無効なフィールドについてユーザーに警告する代わりに、ページがリロードされてメイン ページに戻ります。私は何を間違っていますか？

インデックス ファイルのヘッドにある content div にページをロードするスクリプト:

<script>
$(document).ready(function(){
    $formLoad = false;
    $('div#happenings').load('happenings.html #happenings_content'); 
    $('div#menu_content').load('home.html #contentA');
    $('div#page_content').load('home.html #contentB');
    $("div#menu ul li a").click(function() {
        var ifContact = $(this).attr('href'); 
            $('div#menu ul li a').removeClass("active").addClass("inactive");
        $(this).removeClass("inactive").addClass("active"); 
        $('div#menu_content').load($(this).attr('href') + ' #contentA');
        $('div#page_content').load(($(this).attr('href') + '#contentB'), 
            function(){ 
                if (ifContact == 'contact.html') { extra bit goes here }); 
            }
                }
        ); <!--FINISH LOADING PAGE CONTENT-->
        return false;
    }); 
});
</script>

インデックス ファイルの先頭にある jQuery 検証スクリプト:

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

JQUERY4U.UTIL =
{
    setupFormValidation: function()
    {
        //form validation rules
        $("#register-form").validate({
            rules: {
                fullname: "required",
                email: {
                    required: true,
                    email: true
                },      
            },
            messages: {
                fullname: "Please enter your firstname",
                email: "Please enter a valid email address"
            },
            submitHandler: function(form) {
                form.submit();
            }
        });
    }
}

//when the dom has loaded setup form validation rules
$(D).ready(function($) {
    JQUERY4U.UTIL.setupFormValidation();
});
})(jQuery, window, document);
</script>

contact.html の div からロードされるフォーム:

<div id="mailform">
<form action="" method="post" id="register-form" novalidate="novalidate">
    <div id="form-content">
    <div class="fieldgroup">
        <label for="fullname">Name:</label>
        <input type="text" name="fullname">
    </div>


    <div class="fieldgroup">
        <label for="email">Email</label>
        <input type="text" name="email">
    </div>

    <div class="fieldgroup">
        <label for="subject">Subject</label>
        <input type="password" name="password">
    </div>

    <div class="fieldgroup">
        <label for="comment" class="commenttop">Comment:</label>
        <textarea id="comment" name="comment" cols="60" rows="10"       
                      maxlength="1000"></textarea>
    </div>  

    <div class="fieldgroup">        
        <input type="checkbox" name="mailinglist" value="Please sign me up 
                       for your mailing list!" checked="yes" />
        <label for="mailinglist">Please sign me up for your mailing list!   
                       </label>
    </div>

    <div class="fieldgroup">
        <input type="submit" value="Register" class="submit"> 
    </div>

    </div>
</form>

</div> <!-- END MAILFORM-->
4

1 に答える 1

0

live() 関数を使用してみてください。

    setupFormValidation: function()    
        {
        $('.submit').live('click', function() {

            //form validation rules    
            $("#register-form").validate({

                rules: {
                    fullname: "required",
                    email: {
                        required: true,
                        email: true
                    },      
                },
                messages: {
                    fullname: "Please enter your firstname",
                    email: "Please enter a valid email address"
                },

                submitHandler: function(form) {
                    form.submit();
                }
            });
       )};
 }
于 2013-06-24T18:30:38.307 に答える