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

Question

我正在尝试使用 jQuery 验证的基本客户端表单验证 plugin.I 有一个基本注册表单，如果我单击一个按钮创建一个所有字段为空的帐户（仅用于测试），我在所有表单字段除了上收到了预期的错误消息，只有一个字段用于输入手机号码。我已经从互联网上下载了代码，这是我唯一拥有的字段 added.I 正在使用 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 验证插件仅验证特定的表单字段

jQuery validation plugin is validating only specific form fields

javascript

jquery

jquery-validate