Вопрос по jquery – Jquery Validation - несколько раз проверять поле в скрытой области

0

Я пытаюсь добавить подтверждение в форму, чтобы добавить контакт, и я не могу сделать это правильно. Моя форма скрыта (с помощью CSS), когда вы загружаете страницу, и вам нужно нажать на кнопку «Добавить контакт», чтобы она появилась. Затем вы увидите простую форму, в которой вы можете ввести имя (обязательно), фамилию и адрес электронной почты (обязательно и подтверждение адреса электронной почты). Когда вы закончите, вы нажмете «добавить», и Jquery выполнит Ajax-вызов к бэкэнду, чтобы добавить новый контакт в БД, и обновит представление, чтобы отобразить вновь созданный контакт и скрыть форму. Когда вы добавляете первый контакт, он работает правильно, но если вы пытаетесь добавить другой контакт сразу после того, как имя не подтверждено (работает, если вы перезагрузите страницу). Я не очень понимаю, почему он так себя ведет, наверное, так как мы уже проверили форму, когда что-то происходит, что нарушает процесс проверки, но я не могу найти что.

Вот мой JavaScript:

$(document).ready(function() {
  //get values //
  var service_name_value = $("#tbl-existing_emails tfoot tr td input[type='hidden']").val();


    /*****************  email management  ******************************/


        //add recipient function
        //triggered when user clicks on add recipient button
        //shows the form to enter the information for the new recipient+
        $('#btn-show_report_add').live("click" ,function(e) {

            if ($('#box-report').is(':visible')) {
                return false;
            }
            if (total_existing_emails < 3) {
                $('#box-report').show();
            }
            else {
                alert("You can have up to 3 extra emails");
            }
        });

        //hides the form to enter information for a new recipient
         $('#box-report button.cancel').click(function() {
             hideEmailForm();
        });

        //adds the email reicpient in DB
        $('#btn-report_add').click(function(e) {
            e.preventDefault();
            // Validate new email form
            $("#weeklyReportsForm").validate({
                debug : true,
                rules : {
                    fld_report_first_name : {
                        required: true
                    },
                    fld_report_email : {
                        required : true,
                        email : true
                    }
                }
            });

            if ($('#weeklyReportsForm').valid() ) { // New email data


                var new_recipient = {first  : $('#fld_report_first_name').val(),
                                 last : $('#fld_report_last_name').val(),
                                 email : $('#fld_report_email').val(),
                                 service_name : service_name_value
                };

                $.getJSON('/account/email-preferences/add-email', new_recipient, function(data) {
                    if(data.email == "fail"){
                        alert("It seems that the email you entered is incorrect.");
                    }
                    else if (data.status) {
                        addEmailRow(new_recipient.first, new_recipient.last, new_recipient.email, data.id);
                    }
                    else {
                        alert("Oops, we couldn't add this email.");
                    }
                });         
            }
        });



//////////// helper functions ////////////////
    function addEmailRow(first, last, email, id) {

        var new_row = '<tr data-id="'+id+'">';
        if (!id) {
            new_row += '<td>'+first+'<input type="hidden" name="recipients['+total_existing_emails+'][first]" value="'+name+'"/></td>';
            new_row += '<td>'+last+'<input type="hidden" name="recipients['+total_existing_emails+'][last]" value="'+last+'"/></td>';                       
            new_row += '<td>'+email+'<input type="hidden" name="recipients['+total_existing_emails+'][email]" value="'+email+'"/></td>';
        }
        else {
            new_row += '<td>'+first+'</td>';
            new_row += '<td>'+last+'</td>';
            new_row += '<td>'+email+'</td>';
        }
        new_row += '<td><button type="button" class="button cancel"><span class="icon"></span><span>Remove</span></button></td>';
        new_row += '</tr>';
        $('#tbl-existing_emails tbody').append(new_row);
        $('#row-nodata').remove();
        total_existing_emails++;
        hideEmailForm();
    }

});

а вот HTML-код соответствующей таблицы:

<table id="tbl-existing_emails" style="width:680px;">
  <thead>
    <tr>
                                        <th>First Name</th>
                                        <th>Last Name</th>
                                        <th>Email</th>
                                        <th></th>
                                        </tr>
                                    </thead>
                                    <tfoot>
                                        <tr>
                                        <td colspan="4">
                                            <button type="button" class="button add" id="btn-show_report_add" name="btn-show_report_add"><span class="icon"></span><span>Add Recipient</span></button>

                                            <div id="box-report" class="toggle">

                                                    <div class="row required">
                                                        <label for="fld_report_first_name">First Name</label>
                                                        <input type="text" name="fld_report_first_name" id="fld_report_first_name" value="{$REPORTRECIPIENT.first_name}" title="Enter the first name of a new recipient for this email.<br/><br/><em>Required</em><br/>Max 255 characters" />
                                                    </div>

                                                    <div class="row">
                                                        <label for="fld_report_last_name">Last Name</label>
                                                        <input type="text" name="fld_report_last_name" id="fld_report_last_name" value="{$REPORTRECIPIENT.last_name}" title="Enter the last name of a new recipient for this email.<br/><br/><em>Recommended</em><br/>Max 255 characters" />
                                                    </div>

                                                    <div class="row required">
                                                        <label for="fld_report_email">Email</label>
                                                        <input type="text" name="fld_report_email" id="fld_report_email" value="{$REPORTRECIPIENT.email}" title="Enter the new email address where this new recipient should receives this email.<br/><br/><em>Required</em><br/>Must be a properly formatted email address (e.g. [email protected])"/>
                                                    </div>

                                                    <input type="hidden" id="fld_report_service_name" name="fld_report_service_name" value="WeeklyReport"/>

                                                    <div class="clear"></div>

                                                    <button class="button add" id="btn-report_add" name="btn-report_add" type="button"><span class="icon"></span><span>Add</span></button>
                                                    <button type="button" class="button cancel" name="btn_cancel"><span class="icon"></span><span>Cancel</span></button>

                                            </div>

                                        </td>
                                        </tr>
                                    </tfoot>
                                    <tbody>
                                        {foreach from=$REPORTRECIPIENTS item="REPORTRECIPIENT"}
                                        <tr data-id="{$REPORTRECIPIENT.id}" class="row box-existing_agent">
                                          <td>{$REPORTRECIPIENT.first}</td>
                                          <td>
                                            {$REPORTRECIPIENT.last}
                                          </td>
                                          <td><a href="mailto:{$REPORTRECIPIENT.email}">{$REPORTRECIPIENT.email}</a></td>
                                          <td>
                                            <button type="button" class="button cancel" name="btn_enail_cancel"><span class="icon"></span><span>Remove</span></button>
                                          </td>
                                        </tr>
                                        {foreachelse}
                                          <tr id="row-nodata">
                                            <td colspan="4">No recipients are associated with this email.</td>
                                          </tr>
                                        {/foreach}
                                    </tbody>
                                </table>

Мне больше некуда смотреть, и любая помощь будет с благодарностью!

Спасибо

Максиму

Ваш Ответ

1   ответ
2

Это не работает, потому что вы завернули.validate() функция в пределахclick обработчик. Это означает, что проверка инициализируется только после щелчка, когда она должна инициализироваться при загрузке страницы.

$('#btn-report_add').click(function(e) {
        e.preventDefault();
        // Validate new email form
        $("#weeklyReportsForm").validate({ // <- this only initializes validation after the click
        ...

Вместо этого это больше похоже на то, как это должно быть сделано (см. Исходный код официальные демоверсии) ...

Немедленно инициализируйте плагин проверки в вашей форме:

 $("#weeklyReportsForm").validate({

     // validation rules and options

     submitHandler: function(form) {
         // optional- stuff to do upon form submission
     }
 ...

 });

Свяжите свою формуsubmit по щелчку вашего элемента:

 $('#btn-report_add').click(function(e) {

        e.preventDefault();

        // your other logic for click

        $("#weeklyReportsForm").submit();

 });

Видеть: Как я могу заставить мой код jQuery Validator запускаться второй раз после того, как форма уже была отправлена?

+ 1 Отличный ответ! dSquared
@ dSquared, спасибо. Кажется, что я вижу много этой же проблемы, опубликованной здесь в последнее время. Может быть, где-то есть форум или блог, который где-то публикует инструкции по этой глубоко ошибочной практике. Sparky
Спасибо @dSquared за помощь. Это почти работает сейчас. Мне просто нужно изменить несколько других функций, которые больше не работают, как ожидалось. Maxime Lepers
@ MaximeLepers, я Sparky, не dSquared, но я знаю, что ты имел в виду. Пожалуйста Sparky

Похожие вопросы