Question

我之前发布了这个，我对jQuery验证插件成为解决方案的可能性感到非常兴奋。也许我只是错过了一些东西......

我想要做的是使用jQuery .load()将表单加载到div中，然后使用jQuery验证插件来验证页面。我的页面使用jQuery .load() 100％工作，因此除了jQuery表单验证之外的所有内容都有效。我在正常的静态页面上使验证插件运行良好，但是一旦我尝试使用.load()在现有网站上实现它，它就会停止按预期运行。

该页面重新加载并将其带回主页面，而不是jQuery警告用户提交的无效字段。我做错了什么？

将页面加载到位于索引文件头部的内容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-->

Answer 1

尝试使用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();
                }
            });
       )};
 }

在jQuery加载表单上的jQuery验证表单插件？

1 个答案: