jQuery UI диалог с плагином проверки формы - PullRequest
Новая
       20

jQuery UI диалог с плагином проверки формы

6 голосов
/ 15 декабря 2010

В настоящее время я использую плагин проверки bassistance для моих форм.И я использую всплывающее модальное диалоговое окно для размещения формы, которая должна быть проверена, но по какой-то причине она не вызывает мою форму ... все мои идентификаторы и ссылки работают, а я до сих пор нетуспех.

Возможно, кто-то может пролить свет на меня.Вот мой код Javascript. 

$("#addEventDialog").dialog("open");

$("#addEventDialog").dialog({
    title: 'Add Event',
    modal: true,
    buttons: {
        "Save": function() {
            $("#interestForm").validate({
                submitHandler: function(form) {
                    $("#calendarWidget2").ajaxSubmit({
                        target: "#calendarResponse",
                        dataType: 'json',
                        beforeSubmit: function () {
                            $('input[type=submit]').attr("disabled", true);
                            $("#calendarResponse").show('slow');
                        },
                        success: function(response, event) {
                            if(response.status == true) {
                                $('input[type=submit]').attr("disabled", false);
                                $("#calendarResponse").delay(5000).fadeOut('slow');

                                //If the widget says it's okay to refresh, refresh otherwise, consider it done
                                if(response.refreshEvents == '1') {
                                    $("#calendar").fullCalendar("refetchEvents");
                                }
                                // Close the dialog box when it has saved successfully
                                $("#addEventDialog").dialog("destroy");
                                // Update the page with the reponse from the server
                                $("#calendarResponse").append("Successfully Added: "+ response.title +"<br />");
                            } else {
                                $("#calendarWidget2").validate();
                                $("#calendarResponse").append("ERROR: "+ response.status +"<br />");    
                            }
                        },
                        error: function() {
                            alert("Oops... Looks like we're having some difficulties.");    
                        }
                    });
                }
            });
        },
        "Cancel": function() { 
            $(this).dialog("close"); 
        } 
    }
});

Ответы [ 5 ]

13 голосов
/ 13 декабря 2011

Я решил похожую проблему в 3 шага:

  1. Прикрепление валидатора к форме: 

    $('#your-form-id').validate();

  2. Когда кнопка Сохранитьвашей модальной формы нажата, отправьте форму (будет запущен валидатор): 

    buttons: {
  "Save": function() {
    $('#your-form-id').submit();
  },

  3. Переместите логику отправки в валидатор submitHandler: 

    $('#your-form-id').validate({
  submitHandler: function(form) {
    // do stuff
  }
});
4 голосов
/ 15 декабря 2010

Функция проверки validate просто устанавливает проверку, но не запускает ее.Запуск происходит автоматически при отправке формы или при заполнении поля. Попробуйте добавить код проверки в событие open: 

$("#addEventDialog").dialog("open");
            $("#addEventDialog").dialog({
                open: function() {
                    $("#interestForm").validate({
                        ...
                    });
                }, ...
3 голосов
/ 21 августа 2012

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

см. http://jsfiddle.net/536fm/6/

1 голос
/ 10 сентября 2013

У меня была такая же проблема при использовании плагина jQuery Dialog (http://jqueryui.com/dialog/) с плагином jQuery Validator (http://jqueryvalidation.org/).). Проблема в том, что диалоговое окно jQuery-UI не добавляется в форму, а добавляется непосредственно перед, поэтому элементы для проверки находятся вне раздела .

Чтобы решить эту проблему, я добавляю атрибут «open» в инициализации Dialog. Внутри этого атрибута я добавляю функцию, котораяоборачивает мой элемент div Dialog внутри элемента формы и затем инициализирует валидатор.

Кроме того, я добавляю атрибут «close» при инициализации Dialog. Внутри этого атрибута я добавляю функцию, которая разворачивает форму, которую я обернул всобытие открытия и сбрасывает валидатор.

Простой пример, 

<script type="text/javascript">
var validator;
$(document).ready(function () {
    $("#dialog-id").dialog({
    autoOpen: false,
    resizable: true,
    width: 450,
    modal: true,
    // Open event => wraps the Dialog source and validate the form.
    open: function (type, data) {
        $(this).wrap("<form id=\"form-id\" action=\"./\"></form>");
        validator = $("#form-id").validate();
    },
    // Close event => unwraps the Dialog source and reset the form to be ready for the next open!
    close: function (type, data) {
        validator.resetForm();
        $(this).unwrap();
    },
    buttons: {
        "Cancel": function () {
            $(this).dialog("close");
        },
        "Create": function () {
            validator.form();
        }
    }
});
</script>

Некоторые HTML для вышеупомянутого JavaScript, 

<div id="dialog-id" title="Thematic Section">
    <div class="form_description">
        Create a thematic section for a conference type.
    </div>
    <ul style="list-style-type:none;">
        <li>
            <label class="description" for="conferencetype_id">Conference Type:</label>
            <div>
                <select id="conferencetype_id" name="conferencetype_id" style="width:150px;"> 
                    <option value="1" selected="selected">Type-1</option> 
                    <option value="2" selected="selected">Type-2</option>
                    </select>
            </div> 
        </li>
        <li>
            <label class="description" for="title">Title:</label>
            <div>
                <input id="title" name="title" type="text" maxlength="100" value="" style="width:350px;" required/> 
            </div> 
        </li>
    </ul>
</div>
1 голос
/ 09 февраля 2011

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

 buttons : {
       "Cancel" : function() {
            $(this).dialog('close');
        },
        "Submit" : function() {
            var isValid = $("#yourForm").valid();
            if(isValid) {
                var formData = $("#yourForm")serialize();
                // pass formData to an ajax call to submit form.

            }
           return false;
        }
 },
...