jQuery validation plugin is validating only specific form fields

Question

I am trying basic client-side form validation using jQuery validation plugin.I have a basic sign up form, if I click on a button to create an account with all fields empty(just for testing), I am getting nice error messages as expected on all form fields except for only one field for inputting cellphone number. I have downloaded the code from the internet and this is the only field I have added.I am using Xampp, Things became even more strange after I moved all files to another computer and try to test the same validation, Guess what? it's no longer working as expected for all fields. This problem has been frying my brains, any help I will be grateful below is the code

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 */

Below is a snapshot of the form, I cant really figure out where is the problem.

What is submitHandler: submitForm doing? I don't see any submitForm function anyplace in your code. — Sparky
– Sparky, Commented Feb 25, 2017 at 14:49
I thought my question will be too long,I have edited my question to include the code for handling form submission — Ngenazy
– Ngenazy, Commented Feb 25, 2017 at 15:13

Community · Accepted Answer · 2017-05-23 11:53:31Z

1

You're declaring the number rule, but your corresponding message is assigned to the minlength rule...

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

And document should not be in quotes...

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

Working DEMO: http://jsfiddle.net/bh5g0wfe/

Side note: You may want to read this too...

Dangerous implications of Allman style in JavaScript

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered Feb 25, 2017 at 14:55

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ngenazy Over a year ago

Thank you Sparky for pointing that out. I changed from minlength to number but still it's not working.I am checking the link you have provided.If there is another way of validating you can suggest I will be grateful.

Sparky Over a year ago

@Ngenazy, I don't know what else to tell you. Your code is working fine in my demo, and I'd always recommend jQuery Validate.

Collectives™ on Stack Overflow

jQuery validation plugin is validating only specific form fields

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related