Проверка формы jQuery + - PullRequest
Новая
       18

Проверка формы jQuery +

0 голосов
/ 28 апреля 2010

У меня есть форма JQuery Dialog, и при отправке я пытаюсь проверить поля. Я использую плагин проверки jQuery для проверки. В этом я сталкиваюсь с проблемой, функция проверки не вызывается.

Я публикую фрагмент кода: 

$("#register-dialog-form").dialog({
    autoOpen: false,
    height: 350,
    width: 450,
    modal: true,
    buttons: {
        'Register': function() {
            $("#registerFrm").validate({
                rules: {
                    accountid: "required",
                    name: {
                        required: true,
                        minlength: 5
                    },
                    username: {
                        required: true,
                        minlength: 5
                    },
                    password: {
                        required: true,
                        minlength: 5
                    }
                },
                messages: {
                    firstname: "Please enter your firstname",
                    accountid: "Please enter the lastname",
                    name: "Please enter a user friendly name",
                    username: {
                        required: "Please enter a username",
                        minlength: jQuery.format("Enter at least {0} characters")
                    },
                    password: {
                        required: "Please provide a password",
                        minlength: jQuery.format("Password must be at least {0} characters long")
                    }
                }
            });

            //******************
            //TODO: Need to submit my form here
            //******************

            $(this).dialog('close');
        },
        Cancel: function() {
            $(this).dialog('close');
        }
    },
    close: function() {
        //$('registerFrm').clearForm();
    }
});

Может кто-нибудь, пожалуйста, скажите мне, что я здесь делаю неправильно. Я также пытался поместить проверку в $(document).ready(function() {}, но безуспешно.

Вот HTML-код: 

<div id="register-dialog-form" title="Register Account - Master" align="center" style="display: none">
            <s:form name="registerFrm" id="registerFrm" action="registermaster" method="POST">

                <table width="90%" border="0" class="ui-widget">
                    <tr>
                        <td>
                            <s:textfield label="Account Id" name="accountid" id="accountid" cssClass="text ui-widget-content ui-corner-all" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <s:textfield label="Name" name="name" id="name" cssClass="text ui-widget-content ui-corner-all" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <s:textfield label="Username" name="username" id="username" cssClass="text ui-widget-content ui-corner-all" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <s:password label="Password" name="password" id="password" cssClass="text ui-widget-content ui-corner-all" />
                        </td>
                    </tr>
                </table>
            </s:form>
        </div><!--End of RegisterAcc form-->

Вот источник страницы: 

    <div id="register-dialog-form" title="Register Account - Master" align="center" style="display: none">

<form id="registerFrm" name="registerFrm" onsubmit="return true;" action="registermaster.action" method="POST"><table class="wwFormTable">

                    <table width="90%" border="0" class="ui-widget">
                        <tr>
                            <td>
                                <tr>
    <td class="tdLabel"><label for="accountid" class="label">Account Id:</label></td>

    <td
><input type="text" name="accountid" value="" id="accountid" class="text ui-widget-content ui-corner-all"/></td>
</tr>

                            </td>
                        </tr>
                        <tr>
                            <td>
                                <tr>
    <td class="tdLabel"><label for="name" class="label">Name:</label></td>

    <td
><input type="text" name="name" value="" id="name" class="text ui-widget-content ui-corner-all"/></td>
</tr>

                            </td>
                        </tr>
                        <tr>
                            <td>
                                <tr>
    <td class="tdLabel"><label for="username" class="label">Username:</label></td>

    <td
><input type="text" name="username" value="" id="username" class="text ui-widget-content ui-corner-all"/></td>
</tr>

                            </td>
                        </tr>
                        <tr>
                            <td>
                                <tr>
    <td class="tdLabel"><label for="password" class="label">Password:</label></td>

    <td
><input type="password" name="password" id="password" class="text ui-widget-content ui-corner-all"/></td>
</tr>

                            </td>
                        </tr>
                    </table>
                </table></form>




            </div><!--End of RegisterAcc form-->

Ответы [ 3 ]

0 голосов
/ 07 мая 2010

Спасибо за помощь, я нашел другой способ сделать проверку, чувствовал, что это было просто. 

var $inputs = $('#registerFrm :input:visible');
                    var inputCount = $('#registerFrm :input:visible').length;

                    $inputs.each(function() {
                            if ($(this).val() == null || $(this).val() == '' || $(this).val() == 0) {
                                $(this).focus();
                                $(this).css("background", "#F3DAFC");
                                return false;
                            } else if ($(this).val() != null) {
                                $(this).css("background", "white");
                                --inputCount;
                            }
                        });
0 голосов
/ 10 сентября 2013

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

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

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

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

<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>
0 голосов
/ 28 апреля 2010

JSP / Struts2 / etc - это серверные технологии, которые запускаются на сервере, генерируют пакет HTML и отправляют его по сети на сторону клиента. Javascript / jQuery работает на клиентском компьютере на другой стороне сети, ничего не знает о коде на стороне сервера, который его сгенерировал, он видит только чистое дерево DOM HTML. Щелкните правой кнопкой мыши страницу в веб-браузере и выберите Просмотр источника . Это все также именно то, что видит JS / jQuery. Там нет ни одной строки кода JSP / Struts2. Причина проблемы должна быть заметна там, в источнике HTML. Следующая строка Struts2, например 

<s:form id="registerFrm">

может, например, не обязательно генерировать 

<form id="registerFrm">

но может быть 

<form id="somePrefix_registerFrm_orSomeSuffix">

Это, конечно, недоступно в jQuery $('#registerFrm'). Вам нужно будет обновить код JS / jQuery, чтобы использовать именно сгенерированный идентификатор, т.е. $('#somePrefix_registerFrm_orSomeSuffix').

Подводя итог: не смотрите на код JSP / Struts2 / whatMVCframework на стороне сервера, а на его сгенерированный HTML-вывод при написании кода JS / jQuery.

...