CODEWITHSUNDEEP
javascriptjqueryjquery-validate
Ngenazy
Ngenazy

Reputation: 165

jQuery validation plugin is validating only specific form fields

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. form with field for cellphone not showing errors

Upvotes: 0

Views: 1291

Answers (1)

Sparky
Sparky

Reputation: 98758

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

Upvotes: 1

Related Questions