CODEWITHSUNDEEP
jqueryjquery-validate
happy_fist
happy_fist

Reputation: 171

jQuery validate returns: Object [object Object] has no method 'validate'

I have jQuery validate problem. I know it has been asked many times but i still don't see what am I doing wrong

i have this HTML (EDIT: added whole HTML file):

<!DOCTYPE html>
<html>
<head>
    <title>Zaposli me :D</title>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Bootstrap -->
<link href="../assets/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="../assets/css/styles.css" rel="stylesheet" media="screen">
<link href="../assets/css/datepicker.css" rel="stylesheet" media="screen">
<link href="../assets/css/login.css" rel="stylesheet" media="screen">
<!--        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>-->
<script src="../assets/js/jquery-1.9.0.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
<script src="../assets/js/jquery.validate.js"></script>
<script src="../assets/js/bootstrap-datepicker.js"></script>
<script src="../assets/js/holder.min.js"></script>
<script src="../assets/js/ajax.js"></script>
<script src="../assets/js/validation.js"></script>


<style type="text/css">
    label.valid {
        width: 24px;
        height: 24px;
        /*background: url('assets/img/valid.png') center center no-repeat;*/
        display: inline-block;
        text-indent: -9999px;
    }
    label.error {
        font-weight: bold;
        color: #ff4932;
        padding: 2px 8px;
        margin-top: 2px;
    }
</style>

</head>
<body>

<div class="row  container-color">
<div class="col-lg-12">
    <div class="panel">
        <div class="panel-heading"><i class="icon icon-chevron-up chevron"></i>
            <i class="icon icon-wrench pull-right"></i> Dobrodošli
        </div>
        <div class="panel-content form-horizontal">

            <div class="row">
                <!--  ========================================== LEFT PART ==========================================  -->
                <div class="col-lg-6">
                    <form method="POST" id="registrationForm" action="../controllers/forms.php?register=true">
                        <fieldset>
                            <legend>Registruj se</legend>
                            <div class="form-group">
                                <label for="email">Email adresa</label>
                                <input name="email" type="text" class="form-control input-small" id="email" placeholder="Unesite email">
                            </div>
                            <div class="form-group">
                                <label for="name">Ime</label>
                                <input name="name" type="text" class="form-control input-small" id="name" placeholder="Vaše ime">
                            </div>
                            <div class="form-group">
                                <label for="birth">Datum rođenja</label>
                                <input name="birth" type="text" class="form-control input-small datepicker" id="birth" placeholder="Unesite vas datum rodjenja">
                            </div>
                            <div class="form-group">
                                <label for="unique_number">Jednistveni broj</label>
                                <input name="unique_number" type="text" class="form-control input-small" id="unique_number" placeholder="Password">
                            </div>
                            <div class="form-group">
                                <label for="password">Šifra</label>
                                <input name="password" type="password" class="form-control input-small" id="password" placeholder="Password">
                            </div>
                            <div class="form-group">
                                <label for="repeated_password">Ponovite šifru</label>
                                <input name="repeated_password" type="password" class="form-control input-small" id="repeated_password" placeholder="Password">
                            </div>
                            <div class="control-group">
                                <label></label>
                                <div class="controls">
                                    <button type="submit" class="btn btn-default">Registruj se</button>
                                </div>
                            </div>
                        </fieldset>
                    </form>
                </div>

                <!--  ========================================== CENTRAL PART ==========================================  -->
                <div class="col-lg-6">
                    <form method="POST" id="loginForm" action="../controllers/forms.php?login=true">
                        <fieldset>
                            <legend>Uloguj se</legend>
                            <div class="form-group">
                                <label for="loginEmail">Email adresa</label>
                                <input name="loginEmail" type="text" class="form-control input-small" id="loginEmail" placeholder="Unesite email">
                            </div>
                            <div class="form-group">
                                <label for="pass">Password</label>
                                <input name="pass" type="password" class="form-control input-small" id="pass" placeholder="Password">
                            </div>
                            <div class="control-group">
                                <label></label>
                                <div class="controls">
                                    <button type="submit" class="btn btn-default">Uloguj se</button>
                                </div>
                            </div>
                        </fieldset>
                    </form>
                </div>


            </div>

        </div><!--/panel content-->
    </div>

</div>
</div>
<script>
    $('.datepicker').datepicker();
</script>
<!-- JavaScript plugins (requires jQuery) -->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../assets/js/bootstrap.min.js"></script>

</body>
</html>

And this js file (validation.js):

jQuery(function(){
    $('#loginForm').validate({
        rules: {
            loginEmail: {
                required: true
            }
        }
    });
});

And here are my included files:

    <script src="../assets/js/jquery-1.9.0.js"></script>
    <script src="../assets/js/jquery.validate.js"></script>
    <script src="../assets/js/validation.js"></script>

I do not get any errors about not loading files. But i do get error about Object [object Object] has no method 'validate' . Anybody knows why?

Upvotes: 1

Views: 3246

Answers (2)

2kreate
2kreate

Reputation: 148

I was having a very similar problem using multiple javascript libraries (jQuery and others were using the $, and causing multiple errors).

Using noconflict mode I eliminated the issues.

Here is a link to the jQuery noconflict mode. Hope this helps!

Upvotes: 4

davids
davids

Reputation: 5577

If js says the method doesn't exist and you know it does, you are probably calling it prior to it getting loaded.

Make sure you are loading the js files BEFORE you try to execute .validate.

You haven't posted enough code (at least not all in context) to see when and how you are loading each.

Upvotes: 1

Related Questions