CODEWITHSUNDEEP
jqueryjquery-uijquery-validate
Bahdeng
Bahdeng

Reputation: 434

jquery validate not working on multiple 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

Upvotes: 1

Views: 3430

Answers (2)

Manse
Manse

Reputation: 38147

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 :

Upvotes: 2

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 174957

It should be

form.validate();

And not 

$(form).validate();

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

Upvotes: 2

Related Questions