Question

我在项目中使用JQuery 1.4.2和Colorbox（http://colorpowered.com/colorbox/）和验证（http://bassistance.de/jquery-plugins/jquery-plugin-validation/）插件。我在Chrome（10.0.648.127 beta）和Safari（5.0.1）中遇到问题 - 我的模态窗口的内容在验证后不会刷新。我的意思是，当我在表单中输入错误的值（在此模态窗口中）并验证它时，不会出现错误消息。验证工作正常，因为我在控制台中看到，valid（）方法返回了良好的值。当我关闭我的模态，并再次打开它（没有刷新页面），然后我看到错误消息。当然，为了让它消失，我必须输入良好的价值，并且agian关闭并再次打开我的模态窗口。

在Firefox 3.6.13中，Opera 11.01和IE9 RC一切正常。

我的JS代码：

$.colorbox({
            width: 1000,
            scrolling: false,
            inline: true,
            href: '#userForm',
            onComplete: function() {
                $('#userForm').validate({
                    rules: {
                        name: {
                            minlength: 4,
                            required: true,
                            remote: "ajax/ajaxUsers.php?ajaxMode=userExists"
                        },
                        pass: {
                            minlength: 6,
                            required: true
                        },
                        pass_2: {
                            equalTo: "#i_pass"
                        },
                        email: "email"
                    },
                    messages:{
                        name: {
                            minlength: 'Nazwa użytkownika powinna mieć conajmniej {0} znaki',
                            required: "Nazwa użytkownika jest wymagana",
                            remote: "Ta nazwa jest już zajęta"
                        },
                        email: "Proszę wpisać prawidłowy adres email",
                        pass:{
                            minlength: 'Hasło powinno mieć conajmniej {0} znaków',
                            required: "Proszę wpisać hasło"
                        },
                        pass_2: "Proszę powtórz hasło z powyższego pola"
                    },
                    errorClass: "invalid",
                    errorElement: "em"
                });
            }
        });

我的HTML：

<div class="hidden">
<div id="userFormDialog" class="dialog">
    <div class="dialogHeader">
        <h2 class="modalButton">Dodaj Nowego Użytkownika</h2>
    </div>
    <div class="dialogContent">
        <form class="adminForm" action="users.php?act=add" method="post" id="userForm">
            <div class="col1">
                <fieldset>
                    <legend>Dane podstawowe:</legend>
                    <p><label for="i_name">Nazwa użytkownika*</label><input type="text" name="name" id="i_name" placeholder="Nazwa użytkownika" autofocus></p>

                    <p><label for="i_fullname">Pełna nazwa</label><input type="text" name="fullname" id="i_fullname" placeholder="Pełna nazwa"></p>

                    <p><label for="i_email">Adres email</label><input type="email" name="email" id="i_email" placeholder="Adres email"></p>

                    <p><input type="checkbox" name="status" id=i_status><label for="i_status">Aktywny?</label></p>
                </fieldset>
                <fieldset>
                    <legend>Autoryzacja</legend>
                    <p><label for="i_pass">Hasło*</label><input type="password" name="pass" id="i_pass" placeholder="Hasło"></p>

                    <p><label for="i_pass_2">Powtórz hasło*</label><input type="password" name="pass_2" id="i_pass_2" placeholder="Powtórz hasło"></p>
                </fieldset>
            </div>
            <div class="col2">
                <fieldset>
                    <legend>Dostęp do Fotoware</legend>
                    <p><label for="i_fw_u">Użytkownik Fotoware</label><input type="text" name="fw_u" id="i_fw_u" placeholder="Użytkownik Fotoware"></p>

                    <p><label for="i_fw_p">Hasło Fotoware</label><input type="password" name="fw_p" id="i_fw_p" placeholder="Hasło Fotoware"></p>
                </fieldset>
                <fieldset class="accessLevel">
                    <legend>Poziom dostępu</legend>
                    <label for="i_level">Wybierz poziom dostępu</label><select name="level" id="i_level">
                {foreach $userLevels as $level}
                    <option value="{$level@key}">{$level}</option>
                {/foreach}
                </select>
                    <ul>
                    {foreach $userPermissions as $perm}
                        <li><input type="checkbox" name="permissions[]" id="i_permissions"
                                   value="{$perm@key}"><label
                                for="i_permissions">{$perm}</label></li>
                    {/foreach}
                    </ul>
                </fieldset>
            </div>
        </form>
        Pola oznaczone gwiazdka są obowiązkowe.
    </div>
    <div class="dialogFooter">
        <button class="modalButton" id="submitUserButton">
            Zapisz
        </button>
        <button class="modalButton closeDialog">
            Anuluj
        </button>
    </div>
</div>

任何想法为什么会这样发生？

Answer 1

可能与您在第一次调用colorbox时创建具有相同ID（#userForm）的另一个表单有关。我建议将colorbox放在iframe模式中。

Answer 2

尝试记录用于添加错误消息的选择器

正如Funky Dude所说，它闻起来像是一个多重的#id问题

在WebKit浏览器中使用colorbox和jQuery验证时出现问题

2 个答案: