jQuery的验证不能在多种形式 [英] jquery validate not working on multiple form
问题描述
jQuery validate可以很好地用于具有单个表单的网页.但是，当我通过jquery调用表单并在jquery-ui对话框中显示时，验证不再起作用.我正在从主页上致电与我们联系.在主页中，存在用于搜索的另一种形式.代码如下.
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();
});
$('.submit').live('click', function () {
$(".validates").each(function() {
$(this).validate();
});
});
验证的地方是表格的类.但这仍然行不通.
Where validates is class of the form. But it still does not work.
HTML代码 我致电联系我们表格的页面
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>
与我们联系表格
<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为联系表单生成的代码
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>
请帮助我.
预先感谢
推荐答案
您只会得到一个表格->
Your only getting a single form ->
var form = $("#ContactSendemailForm");
此选择器获取ID为ContactSendemailForm
您需要使每个表单都通过validate()然后进行验证-表单是否包含类?如果是这样
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();
});
这将在每个jQuery对象上调用validate()方法-选择器返回具有classofform
This calls the validate() method on each of the jQuery objects - the selector returns a collection of DOM elements with the class classofform
已更新
在此答案后面附有评论，我认为我的答案具有误导性...我认为您想同时验证两种表格..但是，我知道您不希望...
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 ...
首先要进行一些基本的解释.. jQuery中的live()方法用于侦听DOM上尚不存在的元素上的事件-当对象在页面加载时出现时，您不需要使用它.
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>
ID为search，因此要在提交时验证此表单，请执行以下操作:
This has an id of search so to validate this form on submit do this :
$('search').submit(function() {
$(this).validate();
)}
然后为了确保您正确地验证了与我们联系(通过弹出窗口)，您可以执行以下操作:
Then to ensure you correctly validate the contact-us (via the popup) form you can do this :
$('#contactform').live('submit', function() {
$(this).validate();
)}
使用live()函数(应在jQuery 1.7+中使用on())意味着无论是否在加载时都有contactform元素，它都将起作用.
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
)}
这可确保在操作DOM元素之前就准备好了
This ensures the DOM elements are ready before being manipulated
更新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库
The core jQuery library should be loaded before any plugins
文档:
- ready()
- live()
- on()
- submit()
这篇关于jQuery的验证不能在多种形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
