个人中心
gpt4 book ai didi

jquery 验证不适用于多种表单

转载 作者：行者123 更新时间：2023-12-01 07:27:06 28 4
gpt4 key购买 nike

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>

请帮我解决这个问题。

提前致谢

最佳答案

您只得到一个表单 ->

var form = $("#ContactSendemailForm");

此选择器获取 ID 为 ContactSendemailForm 的元素

您需要让每个表单进行 validate() 然后验证它 - 表单是否有类？如果是这样，请执行此操作

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

这称为 validate()每个 jQuery 对象上的方法 - 选择器返回具有类 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 库应在任何插件之前加载

文档:

关于jquery 验证不适用于多种表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8757057/

28 4 0
文章推荐： python - 如何将 numpy 1D 数组插入 numpy 3D 数组？
文章推荐： java - 大于和小于特定数字的 IF 语句
文章推荐： java - 方法参数中包含final关键字的目的是什么？
文章推荐： java错误信息空指针异常
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com