jQuery验证无法验证我的信息

Question

我需要在注册期间对我的用户名进行验证，不幸的是，我无法从屏幕上获得任何信息，并且当我单击submit按钮时没有响应。

更新

这是我所做的登录和注册脚本，但是在进行检查时，我无法显示我的错误消息，也无法显示不正确的css样式。

​

​

这是屏幕http://www.screencast.com/t/hQdRev1HOnh

        <script>
        $(document).ready(function() {

            //* boxes animation
            form_wrapper = $('.login_box');
            function boxHeight() {
                form_wrapper.animate({marginTop: (-(form_wrapper.height() / 2) - 24)}, 400);
            }
            ;
            form_wrapper.css({marginTop: (-(form_wrapper.height() / 2) - 24)});
            $('.linkform a,.link_reg a').on('click', function(e) {
                var target = $(this).attr('href'),
                        target_height = $(target).actual('height');
                $(form_wrapper).css({
                    'height': form_wrapper.height()
                });
                $(form_wrapper.find('form:visible')).fadeOut(400, function() {
                    form_wrapper.stop().animate({
                        height: target_height,
                        marginTop: (-(target_height / 2) - 24)
                    }, 500, function() {
                        $(target).fadeIn(400);
                        $('.links_btm .linkform').toggle();
                        $(form_wrapper).css({
                            'height': ''
                        });
                    });
                });
                e.preventDefault();
            });
            //* validation
            $('#login_form').validate({
                onkeyup: false,
                errorClass: 'error',
                validClass: 'valid',
                rules: {
                    username: {required: true, minlength: 3},
                    password: {required: true, minlength: 3}
                },
                highlight: function(element) {
                    $(element).closest('div').addClass("f_error");
                    setTimeout(function() {
                        boxHeight()
                    }, 200)
                },
                unhighlight: function(element) {
                    $(element).closest('div').removeClass("f_error");
                    setTimeout(function() {
                        boxHeight()
                    }, 200)
                },
                errorPlacement: function(error, element) {
                    $(element).closest('div').append(error);
                }
            });
            $('#reg_form').validate({
                onkeyup: false,
                errorClass: 'error',
                validClass: 'valid',
                rules: {
                    reg_username: {
                        required: true,
                        minlength: 3,
                        remote: {
                            url: "http://127.0.0.1/check_username.php",
                            type: "post"
                        }
                    },
                    message: {
                        reg_username: {remote: jQuery.format("{0} is already in use")}
                    },
                    reg_password: {required: true, minlength: 3}
                },
                highlight: function(element) {
                    $(element).closest('div').addClass("f_error");
                    setTimeout(function() {
                        boxHeight()
                    }, 200)
                },
                unhighlight: function(element) {
                    $(element).closest('div').removeClass("f_error");
                    setTimeout(function() {
                        boxHeight()
                    }, 200)
                },
                errorPlacement: function(error, element) {
                    $(element).closest('div').append(error);
                }
            });
        });
    </script>

这是我的用户名检查源代码。虽然我更改了返回字符串的结果，但我无法显示错误消息。

    include('../inc/dbconn.php');

if (isset($_POST['reg_username'])) {
    $reg_username = mysql_real_escape_string($_POST['reg_username']);
    $check_for_username = mysql_query("SELECT username FROM customers_register WHERE username='$reg_username'");
    if (mysql_num_rows($check_for_username)) {
        echo 'false';
    } else {
        //No Record Found - Username is available
        echo 'true';
    }
}

在这里，我的一部分javascript

 $('#reg_form').validate({
        onkeyup: false,
        errorClass: 'error',
        validClass: 'valid',
        rules: {
            reg_username: {required: true, minlength: 3, remote:"check_username.php"},
            reg_password: {required: true, minlength: 3}
        },
        message: {  
            reg_username: {remote: jQuery.format("{0} is already in use")}
        },
        highlight: function(element) {
            $(element).closest('div').addClass("f_error");
            setTimeout(function() {
                boxHeight()
            }, 200)
        },
        unhighlight: function(element) {
            $(element).closest('div').removeClass("f_error");
            setTimeout(function() {
                boxHeight()
            }, 200)
        },
        errorPlacement: function(error, element) {
            $(element).closest('div').append(error);
        }
    });

这是我的check_username.php

<?php

include('../inc/dbconn.php');

if (isset($_POST['reg_username'])) {
    $reg_username = mysql_real_escape_string($_POST['reg_username']);
    $check_for_username = mysql_query("SELECT username FROM customers_register_user WHERE username='$reg_username'");
    if (mysql_num_rows($check_for_username)) {
        echo "TRUE";
    } else {
        //No Record Found - Username is available
        echo "FALSE";
    }
}
?>

这是html源代码。

            <form method="post" id="reg_form" style="display:none">

            <div class="top_b">Sign up</div>
            <div class="alert alert-login">
                By filling in the form bellow and clicking the "Sign Up" button, you accept and agree to <a data-toggle="modal" href="#terms">Terms of Service</a>.
            </div>
            <div id="terms" class="modal hide fade" style="display:none">
                <div class="modal-header">
                    <a class="close" data-dismiss="modal">×</a>
                    <h3>Terms and Conditions</h3>
                </div>                    
                <div class="modal-footer">
                    <a data-dismiss="modal" class="btn" href="#">Close</a>
                </div>
            </div>
            <div class="cnt_b">      
                <? echo '<input type = "hidden" name = "client_mac" value = "' . $client_mac . '">'; ?>                      
                <div class="formRow">
                    <div class="input-prepend">
                        <span class="add-on"><i class="icon-user"></i></span>
                        <input type="text" id="reg_username" name="reg_username" placeholder="Username" />
                    </div>
                </div>
                <div class="formRow">
                    <div class="input-prepend">
                        <span class="add-on"><i class="icon-lock"></i></span><input type="password" id="reg_password" name="reg_password" placeholder="Password" />
                    </div>
                </div>
                <div class="formRow">
                    <div class="input-prepend">                           
                        <span class="add-on">@</span><input type="text" disabled="disabled" id="email" placeholder="<?= $email ?>" />

                    </div>
                    <small>The e-mail address is not made public and will only be used if you wish to receive a new password.</small>
                </div>

            </div>
            <div class="btm_b tac">
                <button class="btn btn-inverse" name="oprf" value="signup" type="submit">Sign Up</button>
            </div>
        </form>

Answer 1

您的jquery代码似乎很好。你能不能像这样调试你的脚本：-

    <?php
    error_reporting(E_ALL);
    include('../inc/dbconn.php');

    if (isset($_POST['reg_username'])) {
        $reg_username = mysql_real_escape_string($_POST['reg_username']);
        $check_for_username = mysql_query("SELECT username FROM customers_register_user WHERE username='$reg_username'") or die(mysql_error());
        // If 0 reocrd found then username available
        if (mysql_num_rows($check_for_username) > 0) {
            echo 0;
        } else {
            //No Record Found - Username is available
            echo 1;
        }
    }
    ?>

Answer 2

Quote OP:

“这是最新的更新，似乎我可以从验证中获得TRUE和FALSE，但问题是，虽然我已经输入了值，但仍然弹出了错误，我无法提交注册。”

你的密码..。

if (mysql_num_rows($check_for_username)) {
    echo "TRUE";
} else {
    //No Record Found - Username is available
    echo "FALSE";
}

您的true/false逻辑是完全相反的。在jQuery验证插件中，如果方法返回true，则表示元素通过验证，false表示元素验证失败(触发错误消息)。

当用户名已经在数据库中时，您正在回显"TRUE"，但是，您应该回显"FALSE"，以表明该字段已验证失败。

编辑：

根据文件：

响应被计算为JSON和必须是有效元素的，对于无效元素可以是任何false、undefined或null .

http://jqueryvalidation.org/remote-method/