当前位置： 文江博客 话题详情

jquery 验证不适用于多种表单

发布于 2024-12-25 09:34:43 字数 5766 浏览 1 评论 0 原文

Jquery validate 对于单一表单的网页效果很好。但是，当我通过 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>

请帮助我。

提前致谢

原文

Jquery validate works fine for webpage with single form. However, when i call the form through jquery and display in jquery-ui dialog the validation does not work anymore. I am calling the contact us from from the main page. In the main page another form exist use for searching. The code is given below. 

$("#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();
    });

EDIT:

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

    });

Where validates is class of the form. But it still does not work.

EDIT: The HTML code
The page from where i call the contact us form

<!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>

The Contact us form

<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();
     ?>

Update: The code generated by Cakephp for the Contact Form

<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>

Kindly help me on this.

Thanks in advance

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

宣告ˉ结束 2025-01-01 09:34:43

你只得到一个单一的表格 ->

var form = $("#ContactSendemailForm");

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

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

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

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

每个()的文档

更新

按照此答案附加的评论我认为我的回答具有误导性......我以为你想要同时验证两种形式..但是现在，我知道你不知道...

首先一些基本解释.. 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>

它有一个 search id，因此可以验证此表单提交执行此操作：

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

submit() 方法

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

$('#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 库应该是在任何插件文档之前加载

：

Your only getting a single form ->

var form = $("#ContactSendemailForm");

this selector gets an element with the ID of ContactSendemailForm

you need to get each form to validate() then validate it - do the forms have classes ? if so do this

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

This calls the validate() method on each of the jQuery objects - the selector returns a collection of DOM elements with the class classofform

Docs for each()

Updated

Following the comments attached to this answer I think that my answer was misleading ... I thought that you wanted to validate both forms at the same time .. now, however, I know you don't ...

First off some basic explanation .. the live() method in jQuery is used to listen to events on elements that are not yet present on the DOM - you dont need to use this when the object is present at page load ...

You have a page with a form already present :

<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>

This has an id of search so to validate this form on submit do this :

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

Docs for the submit() method

Then to ensure you correctly validate the contact-us (via the popup) form you can do this :

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

The use of the live() function (on() should be used in jQuery 1.7+) means that it will work whether the contactform element is present at load or not.

One last thing to note is that the code that executes on elements present on load should be contained in the following function

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

This ensures the DOM elements are ready before being manipulated

Update 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>

Should be

<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>

The core jQuery library should be loaded before any plugins

Docs :

回复 原文
红焚 2025-01-01 09:34:43

它应该是

form.validate();

而不是

$(form).validate();

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

It should be

form.validate();

And not 

$(form).validate();

You've already included the $() part when you set the variable.

回复 原文
~没有更多了~

关于作者

赢得她心

暂无简介

文章
评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

櫻之舞

文章 0 评论 0

弥枳

文章 0 评论 0

m2429

文章 0 评论 0

寻找一个思念的角度

文章 0 评论 0

野却迷人

文章 0 评论 0

我怀念的。

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文