1

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?

6
  • Check your scripts under sources tab and see if validate.js is actually loaded Commented Aug 8, 2013 at 23:06
  • 2
    The error simply means that the plugin is not available when your .validate() code is called. Are you using jQuery's .noConflict() method anyplace we can't see? Did you try placing your .validate() code in the page instead of an external file? What basic troubleshooting have you performed? Any? Commented Aug 9, 2013 at 15:05
  • @Sushanth-- validate.js is being loaded. Commented Aug 10, 2013 at 11:42
  • @Sparky I have tried to put .validate in the file. And i haven't used .noConflict() method. Commented Aug 10, 2013 at 11:43
  • I don't know what to tell you. From what you've posted, it should be working, so you'll have to post something that demonstrates the problem. Again, what basic troubleshooting have you performed? Commented Aug 10, 2013 at 13:28

2 Answers 2

4

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!

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

1 Comment

I had the same issue. This fixed it for me. Although I'm not using any other libraries, which is a bit weird.
1

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.

6 Comments

From code posted in the question, I can see his included files are in the proper order and he's wrapping .validate() in a DOM ready handler, so not really sure what you're talking about. Clearly, the OP has not posted enough code or information to solve the problem without guessing.
Without the full context, we can't know exactly what is happening. As you said, he has not posted enough code (but I don't think he deserved the down vote. He is learning).
Down-votes are not meant to be punitive. Voting is based solely on the merits of the posting. Was any research done?, is it within the scope of SO?, and is there enough information provided to replicate the issue? Please see: stackoverflow.com/help and meta.stackoverflow.com for more guidelines.
Fair enough, but a downvote without an explanation of why comes accross as punitive (in this case probably because happy_fist doesn't know any better) rather than instructive. Hopefully, with your questions, happy_fist will provide more info to demonstrate suffcient effort and allow for help in finding a solution.
OK, im am sorry, i couldn't find time to get back earlier. I have edited question and sent whole HTML file. Can this be of any help?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.