Question

Jquery验证适用于单个表单的网页。但是，当我通过jquery调用表单并在jquery-ui对话框中显示时，验证不再起作用。我从主页面打电话给我们。在主页面中存在用于搜索的另一种形式。代码如下。

$("#contactus").live('click',function(){
            $.get('/gordon/contacts/sendemail',function(result){
            $('#popupinfo').html(result);   
            $( "#popupinfo" ).dialog( "option", "title", 'Contact Us' );
            $( "#popupinfo" ).dialog( "option", "height",'auto');
            $( "#popupinfo" ).dialog( "option", "width",650);    
            $("#popupinfo").dialog('open');
       });
    });
    $("#popupinfo").dialog({
      autoOpen: false,
  show: "blind",
  hide: "explode",
      modal: true
   });
$('.submit').live('click', function () {
          var form = $("#ContactSendemailForm");
          $(form).validate();
    });

编辑：

 $('.submit').live('click', function () {
         $(".validates").each(function() {
             $(this).validate();
            });

    });

验证是表格的类别。但它仍然无效。

编辑：HTML代码我打电话给联系我们的页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="/js/jquery.validate-1.9.js"></script>
    <script type="text/javascript" src="/js/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="/js/jquery-ui-1.8.16.custom.min.js"></script>

<script type="text/javascript">
    $(function() {
      $("#contactus").live('click',function(){
            $.get('/gordon/shows/send',function(result){
            $('#popupinfo').html(result);   
            $( "#popupinfo" ).dialog( "option", "title", 'Contact Us' );
            $( "#popupinfo" ).dialog( "option", "height",'auto');
            $( "#popupinfo" ).dialog( "option", "width",650);    
            $("#popupinfo").dialog('open');
            });
        });
       $("#popupinfo").dialog({
            autoOpen: false,
            show: "blind",
            hide: "explode",
            modal: true
       });

        $('.submit').live('click', function () {
            $('.validates').each(function() {
                $(this).validate();
            });
        });
    });
</script>

</head>
<body>
    <!-- for searching contents from the website -->
    <form action="/gordon/searchresults" id="search" class="search-form" method="post" accept-charset="utf-8">
        <div style="display:none;">
            <input type="hidden" name="_method" value="POST"/>
        </div>
        <input name="data[q]" class="search" id="searchtext" type="text"/>
        <input value="" type="submit" class="button" />
    </form>

    <div id="popupinfo"></div>

    <a href="#" id="contactus" onclick="return false;">Contact us</a>

</body>
</html>

联系我们表格

<style type="text/css">
    label { width: 10em; float: left; }
    label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
    p { clear: both; }
    .submit { margin-left: 12em; }
    em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>

    <?php
        echo $this->Form->create('Contact',array('class'=>'validates'));
        echo '<fieldset>';
        echo '<p>' . $this->Form->input('name',array('label' => 'Name','class'=>'required')) . '</p>';
        echo '<p>' . $this->Form->input('email',array('label' => 'Email','class'=>'required email')) . '</p>';
        echo '<p>' . $this->Form->input('subject',array('label' => 'Subject','class'=>'required')) . '</p>';
        echo '<p>' . $this->Form->input('message',array('rows'=>3,'label' => 'Message','class'=>'required')) . '</p>';

        echo '<p><input id="sendmail" value="" type="submit" class="submit" /></p>';
        echo '</fieldset>';

        echo $this->Form->end();
     ?>

更新：Cakephp为联系表单生成的代码

<form action="/gordon/contacts/sendemail" controller="contacts" id="ContactSendemailForm" method="post" accept-charset="utf-8">
    <div style="display:none;">
        <input type="hidden" name="_method" value="POST"/>
    </div><fieldset><p>
    <div class="input text required">
        <label for="ContactName">Name</label>
        <input name="data[Contact][name]" class="required" maxlength="60" type="text" value="" id="ContactName"/>
    </div></p>
    <p><div class="input text required">
        <label for="ContactEmail">Email</label>
        <input name="data[Contact][email]" class="required email" maxlength="60" type="text" value="" id="ContactEmail"/>
    </div></p>
    <p><div class="input text required">
    <label for="ContactSubject">Subject</label>
    <input name="data[Contact][subject]" class="required" maxlength="100" type="text" value="" id="ContactSubject"/>
    </div></p>
    <p><div class="input textarea required">
        <label for="ContactMessage">Message</label>
        <textarea name="data[Contact][message]" rows="3" class="required" cols="30" id="ContactMessage"></textarea>
        </div></p>
    <p><input id="sendmail" value="" type="submit" class="submit" /></p>
    </fieldset>
</form>

请帮助我。

提前致谢

Answer 1

~~您只获得一个表单 - ＆gt;~~

<击>
var form = $("#ContactSendemailForm");

此选择器获取ID为ContactSendemailForm
的元素
你需要让每个表单验证（）然后验证它 - 表单是否有类？如果是这样的话

$(".classofform").each(function() { $(this).validate(); });

这会在每个jQuery对象上调用validate()方法 - 选择器返回带有类classofform的DOM元素的集合

Docs for each()

<击>

<强>更新

根据这个回答的评论，我认为我的回答是误导性的...我认为你想同时验证这两种形式......但是，我知道你不是......

首先是一些基本的解释.. jQuery中的live（）方法用于监听DOM上尚未出现的元素上的事件 - 当页面加载时出现对象时，你不需要使用它。

您有一个已存在表单的页面：

<form action="/gordon/searchresults" id="search" class="search-form" method="post" accept-charset="utf-8"> <div style="display:none;"> <input type="hidden" name="_method" value="POST"/> </div> <input name="data[q]" class="search" id="searchtext" type="text"/> <input value="" type="submit" class="button" /> </form> <div id="popupinfo"></div> <a href="#" id="contactus" onclick="return false;">Contact us</a>

其ID为search，因此要在提交时验证此表单，请执行以下操作：

$('search').submit(function() { $(this).validate(); )}

submit() method
的文档
然后为了确保您正确验证联系我们（通过弹出窗口）表单，您可以执行以下操作：

$('#contactform').live('submit', function() { $(this).validate(); )}

使用live（）函数（on（）应该在jQuery 1.7+中使用）意味着无论contactform元素是否在加载时都可以使用它。

最后要注意的是，在加载时出现的元素上执行的代码应该包含在以下函数中

$(document).ready(function() { // code here )}

这确保DOM元素在被操作之前就绪了

更新2

<script type="text/javascript" src="/js/jquery.validate-1.9.js"></script> <script type="text/javascript" src="/js/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="/js/jquery-ui-1.8.16.custom.min.js"></script>

应该是

<script type="text/javascript" src="/js/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="/js/jquery.validate-1.9.js"></script> <script type="text/javascript" src="/js/jquery-ui-1.8.16.custom.min.js"></script>

核心jQuery库应该在任何插件之前加载

文件：

ready()

live()

on()

submit()

Answer 2

应该是

form.validate();

而不是

$(form).validate();

设置变量时，您已经包含了$()部分。

jquery验证不能在多个表单上工作

2 个答案: