Question

我正在尝试使用jQuery验证插件进行基本的客户端表单验证。我有一个基本的注册表单，如果我点击一个按钮来创建一个所有字段为空的帐户（仅用于测试），我会得到很好的错误所有表单字段除了之外的消息，仅用于输入手机号码的一个字段。我已经从互联网上下载了代码，这是我添加的唯一字段。我使用Xampp，在将所有文件移动到另一台计算机并尝试测试相同的验证后，事情变得更加奇怪，猜猜怎么办？ 它已不再按预期运行所有字段。这个问题一直困扰着我的大脑，下面我将不胜感激的任何帮助是代码

HTML

        <h2 class="form-signin-heading">Sign Up</h2><hr />

        <div id="error">
        </div>

        <div class="form-group">
            <input type="text" class="form-control" placeholder="Username" name="user_name" id="user_name" />
        </div>

        <div class="form-group">
            <input type="email" class="form-control" placeholder="Email address" name="user_email" id="user_email" />
            <span id="check-e"></span>
        </div>

        <div class="form-group">
            <input type="text" class="form-control" placeholder="Cellphone" name="user_cellphone" id="user_cellphone" />
        </div>
   <div class="form-group">
            <input type="password" class="form-control" placeholder="Password" name="password" id="password" />
        </div>

        <div class="form-group">
            <input type="password" class="form-control" placeholder="Retype Password" name="cpassword" id="cpassword" />
        </div>
        <hr />

        <div class="form-group">
            <button type="submit" class="btn btn-default" name="btn-save" id="btn-submit">
                <span class="glyphicon glyphicon-log-in"></span> &nbsp; Create Account
            </button>
        </div>

    </form>

JS

$('document').ready(function()
{
/* validation */
$("#register-form").validate({
    rules:
    {
        user_name: {
            required: true,
            minlength: 3
        },
        user_cellphone: {
            required: true,
            number: true
        },
        password: {
            required: true,
            minlength: 8,
            maxlength: 15
        },
        cpassword: {
            required: true,
            equalTo: '#password'
        },
        user_email: {
            required: true,
            email: true
        }
    },
    messages:
    {
        user_name: "Enter a Valid Username",
        user_cellphone:{
            required: "Provide a phone number",
            number: "Phone Needs To Be a number"
        },
        password:{
            required: "Provide a Password",
            minlength: "Password Needs To Be Minimum of 8 Characters"
        },
        user_email: "Enter a Valid Email",
        cpassword:{
            required: "Retype Your Password",
            equalTo: "Password Mismatch! Retype"
        }
    },
    submitHandler: submitForm
});
/* validation */
/* form submit */
function submitForm()
{
    var data = $("#register-form").serialize();

    $.ajax({

        type : 'POST',
        url  : 'register.php',
        data : data,
        beforeSend: function()
        {
            $("#error").fadeOut();
            $("#btn-submit").html('<span class="glyphicon glyphicon-transfer"></span> &nbsp; sending ...');
        },
        success :  function(data)
        {
            if(data==1){

                $("#error").fadeIn(1000, function(){


                    $("#error").html('<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span> &nbsp; Sorry email already taken !</div>');

                    $("#btn-submit").html('<span class="glyphicon glyphicon-log-in"></span> &nbsp; Create Account');

                });

            }
            else if(data=="registered")
            {

                $("#btn-submit").html('Signing Up');
                setTimeout('$(".form-signin").fadeOut(500, function(){ $(".signin-form").load("successreg.php"); }); ',5000);

            }
            else{

                $("#error").fadeIn(1000, function(){

                    $("#error").html('<div class="alert alert-danger"><span class="glyphicon glyphicon-info-sign"></span> &nbsp; '+data+' !</div>');

                    $("#btn-submit").html('<span class="glyphicon glyphicon-log-in"></span> &nbsp; Create Account');

                });

            }
        }
    });
    return false;
}
/* form submit */

下面是表单的快照，我无法确定问题出在哪里。

Answer 1

您已宣布number规则，但相应的消息已分配给minlength规则...

rules: {
    user_cellphone: {
        required: true,
        number: true
    },
    ....
},
messages: {
    user_cellphone: {
        required: "Provide a phone number",
        minlength: "Phone Needs To Be a number"
    },
    ....

并且document 不应该在引号中...

$(document).ready(function() {...

工作演示：http://jsfiddle.net/bh5g0wfe/

旁注：您可能也想阅读此内容......

Dangerous implications of Allman style in JavaScript

jQuery验证插件仅验证特定的表单字段

1 个答案: