Question

I have tried to run the script severally but not successful. I used firebug to check the error, but its complaining about this line TypeError: $(...).validate is not a function (required: "Please enter a name")

THIS IS MY SCRIPT

<style type="text/css">  
 .errors {color:#900};  
</style>    
<script src="jquery.js"></script>
<script src="jquery.validate.min.js"></script>

<script>

$().ready(function() {


// validate signup form on keyup and submit
$("#feedback").validate({
errorClass:"errors",
    rules: {

        nameid: {
            required: true
        }
        },
    messages: {

        nameid: {
            required: "Please enter a name"

        }
    }
});

 });

 </script>

THIS IS MY FORM

<form id="feedback" name="form1" method="post">
              <p><strong>Fill the Form Below to get back to us</strong><br>
              </p>
              <table width="400" cellpadding="4" cellspacing="3">
                <tr>
                  <td>Name:</td>
                  <td><input type="text" name="name" id="nameid" placeholder="Enter Full Name"></td>
                </tr>
                <tr>
                  <td>Email:</td>
                  <td><input type="email" name="email" id="emailid" placeholder="Enter Your Email"></td>
                </tr>
                <tr>
                  <td>Phone:</td>
                  <td><input type="text" name="phone" id="phoneid" placeholder="Enter Your Phone #"></td>
                </tr>
                <tr>
                  <td>Message:</td>
                  <td><textarea name="message" id="msgid" placeholder="Enter Your Message"></textarea></td>
                </tr>
                <tr>
                  <td></td>
                  <td><input class="submit" type="submit" value="Send"></td>
                </tr>
              </table>
          </form>
Était-ce utile?

La solution

I don't know what else you're loading in your project, but this usually happens with people working with popular CMS frameworks, that uses different plugins, etc creating a javascript conflict.

Have a read here http://api.jquery.com/jquery.noconflict/ about how to avoid this.

Your solution should be something like this:

jQuery.noConflict();

(function( $ ) {

    $(function() {

        $(document).ready(function() {


        // validate signup form on keyup and submit
        $("#feedback").validate({
        errorClass:"errors",
            rules: {

                nameid: {
                    required: true
                }
                },
            messages: {

                nameid: {
                    required: "Please enter a name"

                }
            }
        });

         });


    });

})(jQuery);

Hope this helps!

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top