Как использовать плагин проверки jquery в диалоге пользовательского интерфейса jquery и в форме asp, все это на одной странице asp.net

Question

Мне нужно использовать плагин проверки jquery для проверки как элементов управления внутри jquery UI Dialog , так и элементов управления внутри формы asp.net.

JavaScript:

<script type="text/javascript">

var table = [];

    $(document).ready(function() {
        $("button, input:submit, input:button").button();
        $("#<%=txtDate.ClientID %>").datepicker();

        // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
        $("#dialog:ui-dialog").dialog("destroy");
        $("#form2").validate({

            rules: {
                price: {
                required: true,
                number: true
                },

                description: {
                required: true
                }
            }

        });
                $("#dialog-form").dialog({
                autoOpen: false,
                height: 300,
                width: 350,
                modal: true,
                buttons: {
                    "Add Detail": function() {                       
                        var valid = $("#form2").validate().form();                       
                            if (valid) {
                                $("#save").button("enable");
                                addDetail();
                                $("#save").attr('disabled',false);                     
                                $(this).dialog("close");
                            }
                    },
                    Cancel: function() {
                        $(this).dialog("close");
                    }
                },

                close: function() {

                    $("#price").val("");
                    $("#description").val("");
                }
            });

            $("#newDetail")
        .button()
        .click(function() {
            $("#dialog-form").dialog("open");
        });

            $("#<%=form1.ClientID %>").validate({
                rules: {
                    <%=txtDate.ClientID %> : {
                        required: true,
                        dateEU: true
                    },
                    <%=txtCompany.ClientID %> : {
                        required: true
                    }
                },
                submitHandler: function(form) {

                    form.submit();
                }

            });
        });


        function addDetail() {
            table.push({
            codigo: 0,
            documentoCompra: {
            "codigo": "0"
            },

            price: document.getElementById('price').value,
            description: document.getElementById('description').value
            });

            showRow(table.length - 1);
        }

        function removeDetail(r) {
            var node = r.parentNode;
                while (node && node.tagName !== 'TR') {
                    node = node.parentNode;
                }

            var i = node.rowIndex;

            document.getElementById('DetailTable').deleteRow(i);
            table.splice(i - 1, 1);

                if (table.length == 0) {
                    document.getElementById('save').disabled=true;
                    $("#save").button("disable");
                }
        }

        function showRow(i) {
            if (table.length > 0) {
                var tbl = document.getElementById('DetailTable');

                var newRow = tbl.insertRow(tbl.rows.length);               

                var cell3 = newRow.insertCell(0);               
                cell3.innerHTML = table[i].description;

                var cell4 = newRow.insertCell(1);              
                cell4.innerHTML = table[i].price;                

                var cell2 = newRow.insertCell(2);               
                cell2.innerHTML = '<a href="#"><img src="images/delete.jpg" width="14" height="14" alt="Delete" onclick="removeDetail(this)"/></a>'

                document.getElementById('save').disabled=false;

            }
        }
    </script>

Разметка HTML и Asp.net:

<form id="form1" runat="server">
    <fieldset style="width: 85%">
        <legend>MASTER</legend>
        <div id="contenido1" class="ui-widget">
            <table width="90%" class="ui-widget ui-widget-content">
                <tr>
                    <td align="left" class="ui-widget-header ">
                        COMPANY
                    </td>
                    <td align="left">
                        <asp:TextBox ID="txtCompany" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td align="left" class="ui-widget-header ">
                        DATE
                    </td>
                    <td align="left">
                        <asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td align="left" class="ui-widget-header ">
                        TYPE
                    </td>
                    <td align="left">
                        <asp:DropDownList ID="ddlTipoDoc" runat="server">
                            <asp:ListItem Text="BOLETA" Value="B" Selected="True"></asp:ListItem>
                            <asp:ListItem Text="RECIBO CAJA CHICA" Value="R"></asp:ListItem>
                            <asp:ListItem Text="FACTURA" Value="F"></asp:ListItem>
                        </asp:DropDownList>
                    </td>
                </tr>
            </table>
        </div>       
        <input type="submit" id="save" value="Save" disabled="disabled" />
        &nbsp;&nbsp;&nbsp;
        <input type="button" id="cancelar" value="Cancel" />
    </fieldset>
    </form>
    <!--Detail -->
    <div>
        <fieldset style="width: 85%">
            <legend>DETAIL</legend>
            <div id="dialog-form" title="Add New Detail">
                <p>
                    All the fields are required.</p>
                <form id="form2">
                <table>
                    <tr>
                        <td>
                            <label for="description" id="lbldescription">
                                Description</label>
                        </td>
                        <td>
                            <input type="text" name="description" id="description" class="text ui-widget-content ui-corner-all" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="price" id="lblprice">
                                Price</label>
                        </td>
                        <td>
                            <input type="text" name="price" id="price" class="text ui-widget-content ui-corner-all" />
                        </td>
                    </tr>                   
                </table>
                </form>
            </div>
            <div id="content" class="ui-widget">
                <table id="DetailTable" class="ui-widget ui-widget-content" style="text-align: center">
                    <thead>
                        <tr class="ui-widget-header ">
                            <td width="60%">
                                Description
                            </td>
                            <td width="20%">
                                Price
                            </td>
                            <td width="10%">
                                Delete
                            </td>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
            <table border="0" style="width: 90%">
                <tr>
                    <td colspan="3">
                        <button id="newDetail" style="float: right">
                            Add</button>
                    </td>
                </tr>
            </table>
        </fieldset>
    </div>

Хотя это правда, что я почти все подготовил, у меня все еще есть некоторые сомнения:

1. Что мне нужно сделать, чтобы удалить сообщения об ошибках из элементов управления внутри диалогового окна после закрытия диалогового окна без соблюдения правил проверки?

2. Как мне сделать так, чтобы сообщения об ошибках всегда отображались непосредственно под проверяемыми элементами управления?

3. Будете ли вы любезны проверить, правильно ли я сделал с проверкой диалога? Сначала я добавил правила проверки и внутри кода, который выполняется, когда я нажимаю кнопку «Добавить детали», я добавил условие, чтобы проверить правильность проверки элементов управления, и в этом случае я закрываю диалоговое окно и добавить новую строку в таблицу «Сведения»

Я загрузил пример проекта (JqueryDialog_JqueryValidate) на мой skydrive, действительно очень простой

Любые идеи или предложения будут с благодарностью

Редактировать : Стиль CSS, необходимый для размещения метки ошибки под входными данными

<style type="text/css">       
        input:focus
        {
            border: 2px dotted black;
        }
        input.error
        {
            border: 2px solid red;
        }
        label.error
        {
            color: white;
            text-indent:2px;           
            font-size: 16px;
            font-weight:bold;
            font-family: Nyala;
            background-color: red;
            display:block ;

        }
    </style>

Answer 1

Итак, вот три вопроса:

1.Что мне нужно сделать, чтобы удалить сообщения об ошибках из элементов управления внутри диалогового окна после закрытия диалогового окна без соблюдения правил проверки?

Плагин предоставляет метод resetForm () для валидатораобъект для сброса проверки ( см. документ ).

Когда вы вызываете validate(), он фактически возвращает объект валидатора, который вы можете сохранить и использовать впоследствии:

var dialogFormValidator = $("#form2").validate({...});

В обработчике кнопки «Закрыть» вы можете:

close: function() {
    $("#price").val("");
    $("#description").val("");
    dialogFormValidator.resetForm();
}

Редактировать

Привязка к событию beforeClose правильно сбрасывает форму (классыне удаляются при привязке к событию close:

beforeClose: function() {
    $("#price").val("");
    $("#description").val("");
    dialogFormValidator.resetForm();
}

2. Как сделать так, чтобы сообщения об ошибках всегда отображались непосредственно под проверяемыми элементами управления?

Используйте обратный вызов errorPlacement() в опциях validate(), чтобы разместить метку ошибки в любом месте ( см. Документ ).

По умолчанию они добавляются рядом с полем ввода.С помощью некоторого CSS вы можете показать их «под» входным сигналом (с помощьючто-то вроде display:block; для инст.)

3.диалоговые обработчики кнопок

Что касается сброса, вы можете использовать объект валидатора для проверки действительности:

var valid = dialogFormValidator.form();                       
if (valid) {
     $("#save").button("enable");
     addDetail();
     // why don't you use $("#save").button("disable") ??
     $("#save").attr('disabled',false);  // better use prop() for 'disabled' properties and not attr()              
     $(this).dialog("close");
}

Не уверен насчет обработчика кнопки «Добавить детали».Почему вы включаете / отключаете элемент #Save (двумя различными способами)?

Answer 2

Я боролся с этой проблемой;Через несколько часов я пришел к выводу, что Jquery отображает HTML-элемент DIALOG вне элемента формы.Поскольку плагин Jquery.Validation работает только внутри элемента FORM, необходимо вернуть диалог обратно в области формы.Это можно сделать с помощью следующей открытой обработки событий:

  $('#dialogDivId').dialog({
      autoOpen: false,
      width: 500,
      height: 500,
      minheight: options.minheight,
      minwidth: options.minwidth,
      modal:false,
      open: function (type, data) {
             $(this).appendTo($('form')); // reinsert the dialog to the form           }
});

Это решило мою проблему !!!

Надеюсь, я помог и сэкономил вам время, которое я провел.