проверка JQuery не работает на нескольких формах - PullRequest
Новая
       18

проверка JQuery не работает на нескольких формах

0 голосов
/ 06 января 2012

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

    });

Где validates является классом формы.Но это все еще не работает.

РЕДАКТИРОВАТЬ: 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>

Пожалуйста, помогите мне в этом.

Заранее спасибо

Ответы [ 2 ]

2 голосов
/ 06 января 2012

Вы получаете только одну форму ->

var form = $("#ContactSendemailForm");

этот селектор получает элемент с идентификатором ContactSendemailForm

вам нужно получить каждую форму для проверки (), а затем проверить ее - есть ли в формах классы? если это так, сделайте это 

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

Это вызывает метод validate() для каждого из объектов jQuery - селектор возвращает коллекцию элементов DOM с классом classofform

Документы для каждого ()

Обновлено

После комментариев, приложенных к этому ответу, я думаю, что мой ответ вводил в заблуждение ... Я думал, что вы хотите проверить обе формы одновременно ... теперь, однако, я знаю, что вы не ...

Прежде всего, некоторые базовые объяснения ... метод live () в jQuery используется для прослушивания событий на элементах, которые еще не представлены в 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, поэтому для проверки этой формы при отправке сделайте следующее: 

$('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 должна быть загружена перед плагинами

Документы:

1 голос
/ 06 января 2012

Это должно быть 

form.validate();

А не 

$(form).validate();

Вы уже включили часть $(), когда устанавливаете переменную.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...