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
Your only getting a single form ->var form = $("#ContactSendemailForm");this selector gets an element with the ID of
ContactSendemailFormyou need to get each form to validate() then validate it – do the forms have classes ? if so do this
This calls the
validate()method on each of the jQuery objects – the selector returns a collection of DOM elements with the classclassofformDocs 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 :
This has an id of
searchso to validate this form on submit do this :Docs for the submit() method
Then to ensure you correctly validate the contact-us (via the popup) form you can do this :
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
This ensures the DOM elements are ready before being manipulated
Update 2
Should be
The core jQuery library should be loaded before any plugins
Docs :