jQuery Validation Plugin - 表单不提交

时间:2013-11-29 19:34:58

标签: javascript jquery jquery-validate submit

我正在使用jQuery Validation Plugin,我遇到了问题。 我的jQueryHTML都完全有效(根据JSLintWC3 Markup Validation Service),但是当我点击提交按钮时,没有任何反应。
我的代码甚至清楚地指出,在提交时,应该弹出警报,但即使这样也行不通。然而,表格是正确验证的,在和中,所有字段都是绿色的(意味着它们通过了验证),但它实际上没有提交(没有任何反应)。
此外,在我的DevTools中,控制台不会报告任何错误。


可能/可能相关; 电子邮件文本字段和用户名文本字段都由远程PHP脚本检查。第二次之后,这个脚本非常奇怪,只有 。因此,当我第一次离开(blur)电子邮件文本字段时,没有任何反应,它没有标记为正确也没有错误。
 只有当我(重新输入和)第二次离开文本字段时,它才会被验证,或者当我点击提交按钮时。 (这表示提交按钮实际上是连接的,它只是不提交)

我真的希望有人能解决我的问题。我不是想让其他人做这项工作。我验证,检查,调试,但没有解决我的问题。


我的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";
    }
}
?>

1 个答案:

答案 0 :(得分:1)

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

否则,IMO你的脚本看起来很好。

你所说的不是调用你的submitHandler,或者只触发远程位的东西对我来说似乎并非如此。我复制了你的代码并简单地添加了一些调试(例如当远程被触发或调用submitHandler时调试console.log)并且在适当的时间调用它们。

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

因此,无论您遇到什么问题,都与您展示的代码无关(trueTrue的错误除外。

以下是您的代码的工作示例,供参考: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';