jQuery.steps和远程验证

我正在使用jQuery.steps插件，现在确实存在一些有关验证的问题，我有一个字段“username”，必须对其进行验证（如果该用户名已经存在），然后才能继续下一步，让我向您展示一些代码：

removed

PHP代码如下所示

removed

我在这里遇到的问题是，当我单击“下一步”按钮时，即使用户名已被使用，表单仍将继续。。如果单击“上一步”并且用户名已被使用，则会显示错误消息，在选择可用用户名之前，我无法继续

例如，当我在用户名字段中输入7个字符并单击“下一步”时，表单不会继续，在删除7个字符并输入已采用的用户名后，表单也不会继续

我希望你们不要理解我的问题，并且像往常一样为我提供任何很好的解决方案：-）

如果您需要任何其他信息，请告诉我

干杯

更新 由于我的问题不是很清楚，我创建了一个小的在线示例，它应该反映我的问题，您可以在这里找到：

此页上使用的源代码如下所示

removed

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 -->

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

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

佩索内列斯

Lorem ipsum dolor sit amet。

名称





某物



Sonstige登录


newIndex）
{
返回true；
}
//如果用户返回（清理）某些情况下需要
如果（当前索引<新索引）
{
//删除错误样式的步骤
form.find（“.body:eq（“+newIndex+”）label.error”）.remove（）；
form.find（“.body:eq（“+newIndex+”）.error”）.removeClass（“error”）；
}
form.validate（）.settings.ignore=“：disabled，：hidden”；
返回表单.valid（）；
},
onFinishing：函数（事件、当前索引）
{
form.validate（）.settings.ignore=“：disabled，：hidden”；
返回表单.valid（）；
},
onFinished：函数（事件、当前索引）
{
警惕（“你做到了”）；
},
标签：
{
取消：“Abbrechen”，
当前：“Aktueller Schritt:”，
分页：“分页”，
完成：“完成”，
下一步：“下一步”，
上一个：“后退”，
加载：“Lade…”
}
})
.验证({
规则：{
姓名：{
要求：正确，
最小长度：2
},
姓名：{
要求：正确，
最小长度：2
},
用户名：{
要求：正确，
最小长度：6，
最大长度：6，
远程：{
url:“ajax.php”，
类型：“POST”，
数据：{
行动：功能（）{
返回“validateUsername”；
},
用户名：function（）{
返回$（“#用户名”）.val（）；
}
}
}
}
}
});
});

ajax.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 -->

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

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

---

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

在

远程

选项中，完全删除

数据

参数。默认情况下，已发送正在验证的字段的值。只要PHP使用

echo'true'

或

echo'false'

响应通过/失败，验证插件就会检测到这一点。如果您的PHP在验证失败时使用字符串进行响应，那么它必须使用

echo json\u encode（“您的字符串”）

进行响应，并且该字符串将自动成为v