Question

我正在使用jQuery.steps插件并且现在确实有一些关于验证的问题，我有一个字段“用户名”必须经过验证（如果用户名已经存在），然后继续下一步，让我来看看你有些代码：

removed

PHP代码看起来像这样

removed

我在这里遇到的问题是，当我点击下一个按钮时，即使已经使用了用户名，表单也会继续...如果我单击后面并且已经使用了用户名，则会显示错误消息而我不是能够在选择可用的用户名之前继续。

当我在用户名字段中输入例如7个字符并单击下一个表格后不再继续，删除7个字符并输入已经使用的用户名后表单也不会继续。

我希望你们能解决我的问题并为我提供任何出色的解决方案（一如既往）： - ）

如果您需要任何其他信息，请与我们联系。

干杯！

更新由于我的问题不是很清楚，我创建了一个小型的在线示例，它应该反映我的问题，你可以在这里找到：http://example.crasher.ch/

此页面上使用的来源看起来像这样

的index.php

<form id="test" name="test" action="#" style="width: 650px">
        <h3>Personelles</h3>
        <div>
            <p>
                Lorem ipsum dolor sit amet.
            </p>
            <label for="name">Name</label><input type="text" id="bva_name" name="bva_name" value="Name">
            <br /><br class="clear" />
            <label for="vorname">Firstname</label><input type="text" id="vorname" name="vorname" value="Firstname">
            <br /><br class="clear" />
            <label for="username">Username</label><input type="text" id="username" name="username" value="abcdef">
            <br /><br class="clear" />
        </div>

        <h3>Arbeitsplatz</h3>
        <div class="arbeitsplatz">
            <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
            </p>
            <label for="something">Something</label>
            <input type="text" name="something" id="something" />
            <br /><br class="clear" />
        </div>

        <h3>Abschluss</h3>
        <div>
            <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
            </p>
            <label for="otherlogins">Sonstige Logins</label>
            <textarea name="otherlogins" id="otherlogins"></textarea>
            <br /><br class="clear" />
        </div>
    </form>
    <!-- JQUERY FUNCTIONS -->
    <script>
        $(function()
        {
            // initialize wizzard form  
            var form = $("#test").show();

            form.steps({
                headerTag: "h3",
                bodyTag: "div",
                transitionEffect: "slideLeft",
                onStepChanging: function (event, currentIndex, newIndex)
                {
                    // Allways allow previous action even if the current form is not valid!
                    if (currentIndex > newIndex)
                    {
                        return true;
                    }
                    // Needed in some cases if the user went back (clean up)
                    if (currentIndex < newIndex)
                    {
                        // To remove error styles
                        form.find(".body:eq(" + newIndex + ") label.error").remove();
                        form.find(".body:eq(" + newIndex + ") .error").removeClass("error");
                    }

                    form.validate().settings.ignore = ":disabled,:hidden";
                    return form.valid();
                },
                onFinishing: function (event, currentIndex)
                {
                    form.validate().settings.ignore = ":disabled,:hidden";
                    return form.valid();
                },
                onFinished: function (event, currentIndex)
                {
                    alert('you did it');
                },
                labels: 
                {
                    cancel: "Abbrechen",
                    current: "Aktueller Schritt:",
                    pagination: "Pagination",
                    finish: "Finish",
                    next: "Next",
                    previous: "Back",
                    loading: "Lade..."
                }
                })
                .validate({
                    rules: {
                        name: {
                            required: true,
                            minlength: 2
                        },
                        vorname: {
                            required: true,
                            minlength: 2
                        },
                        username: {
                            required: true,
                            minlength: 6,
                            maxlength: 6,
                            remote: {
                                url: "ajax.php",
                                type: "POST",
                                data: {
                                    action: function() {
                                        return "validateUsername";
                                    },
                                    username: function() {
                                        return $("#username").val();
                                    }
                                }
                            }
                        }
                    }
            });
        });
    </script>
    <!-- /JQUERY FUNCTIONS -->

ajax.php

<?php
$username = $_POST['username'];

if ( $username == "abcdef" || $username == "qwertz" )
{
    echo json_encode("Der Benutzername ist bereits vergeben");
}
else
{
    echo "true";
}
?>

正如您所看到的，如果您只是单击下一步，即使不允许使用预填充的用户名，验证也不起作用，当您单击后退按钮时，您可以看到错误消息，并且在其他用户名被删除之前无法继续进入。此外，如果您更改任何字段（例如，将第一个名称设为空），请单击下一个用户名也会正确验证，因为第一个名称触发了验证 - 我希望现在我的问题对所有人都清楚了：）

jQuery.steps和远程验证

0 个答案: