javascript - jQuery 验证插件 - 表单未提交

Question

我正在使用 jQuery Validation Plugin ，但遇到了问题。我的 jQuery 和 HTML 都完全有效(根据 JSLint 和 WC3 标记验证服务)，但是当我点击了提交按钮，没有任何反应。
我的代码甚至明确指出，提交后，应该弹出警报，但即使这样也不起作用。然而，该表单已正确验证，并且在 和 中，所有字段都是绿色的(意味着它们通过了验证)，但它实际上并未提交(什么也没有发生)。
另外，在我的 DevTools 中，控制台没有报告任何错误。

<小时/>

可能/可能相关；电子邮件文本字段和用户名文本字段均由远程 PHP 脚本检查。这个脚本很奇怪，只有在第二次之后才起作用。因此，当我第一次离开(模糊)电子邮件文本字段时，没有任何反应，它没有被标记为正确或错误。
仅当我(重新输入并)第二次离开文本字段时，或者当我点击提交按钮时，它才会被验证。 (这表明提交按钮实际上已连接，它只是简单地不提交)

我真的希望有人能解决我的问题。我并不是想让别人来做这项工作。我验证、检查、调试，但没有解决我的问题。

<小时/>

我的 HTML (它位于使用 Bootstrap 的模式中):

<div class="modal fade" id="signupModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
<form class="form-horizontal" id="signupform" method="post" action="/" role="form">
            <div class="modal-body" style="padding-bottom: 5px;">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <p class="lead">For creating an account,</p>
                  <p class="lead text-right">you'll have to give us some information.</p>


                    <div id="emailgroup" class="form-group">
                        <label for="signupemail">&nbsp;&nbsp;&nbsp;&nbsp;Your Emailaddress</label>
                        <div class="col-lg-10">
                            <div class="input-group">
                            <span class="input-group-addon">&nbsp;<span class="glyphicon glyphicon-envelope"></span>&nbsp;</span>
                                <input type="email" name="signupemail" spellcheck="false" autocomplete="on" required class="form-control" id="signupemail"   placeholder="Email">

                            </div>
                            <label class="control-label error-label" for="signupemail"></label>
                        </div>
                    </div>

                    <div id="fnamegroup" class="form-group">
                        <label for="inputfname">&nbsp;&nbsp;&nbsp;&nbsp;Your Full Name</label>
                        <div class="col-lg-10">
                            <div class="input-group">
                            <span class="input-group-addon">&nbsp;<span class="glyphicon glyphicon-user"></span>&nbsp;</span>
                                <input type="text" name="fname" required class="form-control" id="inputfname" placeholder="Barack Obama">
                            </div>
                            <label class="control-label error-label" for="inputfname"></label>
                        </div>
                    </div>

                    <div id="unamegroup" class="form-group">
                        <label for="inputuname">&nbsp;&nbsp;&nbsp;&nbsp;Your Username</label>
                        <div class="col-lg-10">
                            <div class="input-group">
                            <span class="input-group-addon">&nbsp;@&nbsp;</span>
                                <input type="text" name="uname" required class="form-control" id="inputuname" placeholder="PresidentofAmerica">
                            </div>
                            <label class="control-label error-label" for="inputuname"></label>
                        </div>
                    </div>

                     <div id="thepasswordgroup" class="form-group">
                        <label for="thepassword">&nbsp;&nbsp;&nbsp;&nbsp;Your Password</label>
                        <div class="col-lg-10">
                            <div class="input-group">
                            <span class="input-group-addon">&nbsp;<span class="glyphicon glyphicon-lock"></span>&nbsp;</span>
                                <input type="password" name="thepassword" required class="form-control" id="thepassword" placeholder="123456789" autocomplete="off">
                            </div>
                            <label class="control-label error-label" for="thepassword"></label>
                        </div>
                    </div><br />

                     <div id="gendergroup">
                        <label>Your Gender</label>                       
                            <div class="radio">
                             <label class="checkbox-inline"><input type="radio" name="gendergroup" id="gendergroupmale" value="male" checked>I'm a Male</label>
                            </div>
                            <div class="radio">
                             <label class="checkbox-inline"><input type="radio" name="gendergroup" id="gendergroupfemale" value="female">I'm a Female</label>
                            </div>                       
                    </div>
                   <br />
                    <div class="form-group">
                    <label for="taccheckbox">&nbsp;&nbsp;&nbsp;&nbsp;Terms and Conditions</label>
                        <div class="col-lg-10">
                            <div class="input-group"><span class="input-group-addon">
                                            <input id="taccheckbox" name="taccheckbox" type="checkbox" required>
                                        </span>

                                <input style="cursor:default !important;" type="text" id="something" value="I accept the Terms and Conditions" readonly class="form-control">
                            </div>
                            <label class="control-label error-label" for="taccheckbox"></label>
                            <!-- /input-group -->
                        </div>
                        <!-- /.col-lg-6 -->
                    </div>



            </div>
            <div class="modal-footer">
            <p>
                        Have already got an account? <strong><a href="#" onClick="$('#signupModal').modal('hide'); $('#loginModal').delay(1500).modal('show');">Login here!</a></strong></p>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <input type="submit" id="signupsubmitbtn" class="btn btn-primary" value="Sign Up">
            </div>
            </form>
        </div>
    </div>
</div>

<小时/>

我的Javascript/jQuery:

$('#signupform').validate({
        rules: {
            signupemail: {
                required: true,
                email: true,
                remote: {
                    url: "/functions/verifysignup.php",
                    type: "post"
                }
            },
            fname: {
                required: true,
                minlength: 8,
                maxlength: 30
            },
            uname: {
                required: true,
                minlength: 6,
                maxlength: 20,
                remote: {
                    url: "/functions/verifysignup.php",
                    type: "post"
                }               
            },
            thepassword: {
                required: true,
                minlength: 5,
                maxlength: 20
            },
            taccheckbox: "required"
        },

        messages: {
            email: {
                remote: "This emailaddress is already in use"
            },
            taccheckbox: {
                required: "You have to accept the Terms and Conditions"
            },
            fname: {
                minlength: "At least 8 characters required",
                maxlength: "Max. 30 characters"
            },
            uname: {
                minlength: "At least 6 characters required",
                maxlength: "Max. 20 characters",
                remote: "This username is already in use"
            }
        },

        submitHandler: function (form) {
            alert('called');
            $('#signupsubmitbtn').prop("disabled", false);
            //^[a-zA-Z0-9_-]{6,15}$ username        
            form.submit();
        },

        errorPlacement: function (error, element) {
            if (element.attr('id') == "taccheckbox") {
                error.appendTo(element.parent().parent().next());
            } else {
                error.appendTo(element.parent().next());
            }
        },

        highlight: function (element) {
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
            $('#signupsubmitbtn').prop("disabled", true);
        },

        unhighlight: function (element) {
            $(element).closest('.form-group').removeClass('has-error').find('label.control-label label').text('');
            if ($('.has-error').length === 0) {
                $('#signupsubmitbtn').prop("disabled", false);
            }
        },

        success: function (element) {
            element.closest('.form-group').removeClass('has-error').addClass('has-success');
            if ($('.has-error').length === 0) {
                $('#signupsubmitbtn').prop("disabled", false);
            }
            //element.parent().next().text('');

        }
    });

我的远程 PHP 脚本:

<?php
define ('INCLUDE_CHECK',true);
require('connect.php');

if(isset($_REQUEST['signupemail'])){
    $email = mysqli_real_escape_string($link, $_REQUEST['signupemail']);
    $thearray = mysqli_fetch_array(mysqli_query($link, "SELECT COUNT(*) FROM `users` WHERE email=\"".$email."\""));

    if($thearray[0] > 0){
        echo '"This emailaddress is already in use"';
    } else {
        echo "True";
    }

} else if(isset($_REQUEST['uname'])){
    $uname = mysqli_real_escape_string($link, $_REQUEST['uname']);
    $thearray = mysqli_fetch_array(mysqli_query($link, "SELECT COUNT(*) FROM `users` WHERE uname=\"".$uname."\"")); 
    $forbiddennames = array(1 => 'super-user','superuser', 'root', 'admin', 'administrator', 'system', 'website', 'site', 'owner', 'manager', 'founder','moderator');    

    if(in_array(strtolower($_REQUEST['uname']), $forbiddennames)) {
        echo '"'.$_REQUEST['uname'].' is a forbidden username"';
    } else if($thearray[0] > 0){
        echo '"This username is already in use, please choose another"';
    } else {
        echo "True";
    }
}
?>

Answer 1

在我看来，一切都非常接近正确。一个问题是您的 php 脚本回显 True，但它必须是 true(小写)。这实际上很重要。

否则，我认为你的脚本看起来不错。

您所说的不调用您的submitHandler，或仅触发远程位的内容对我来说似乎并非如此。我复制了您的代码并简单地添加了一些调试(即，当触发远程或调用 SubmitHandler 时添加到 console.log)，并且两者都在适当的时间被调用。

例如，如果您输入有效的电子邮件，然后单击下一个字段，它会立即验证电子邮件地址。

因此，无论您遇到什么问题，都与您所显示的代码无关(true 与 True 的错误除外)。

这是您的代码的工作示例，供引用:http://jsfiddle.net/ryleyb/tWH9M/1/

为了通过远程工作方式测试它的设置，您必须找到这一点:

    signupemail: {
        required: true,
        email: true,
        remote: {
            url: '/echo/json/',
            data: {
                json: function () {
                    return 'true';
                }
            },
            complete: function (data) {
                $('#log').append('remote signupemail triggered<br>');
            },
            type: 'post'
        },
    },

并将 return 'true'; 更改为 return 'True';