validation using jquery

i'm trying to validate an html page using jquery, but nothing happens. it's a simple page, yet the textboxes aren't validated.

this is the code:

<link rel="stylesheet" type="text/css" href="style.css" /> 
<script type="text/javascript" src="~/jquery.js/"></script>
<script type="text/javascript" src="~/jquery-validate/jquery.validate.js/"></script>
<script type="text/javascript">
  $(document).ready(function(){
    var validator = $("#submitForm").validate({
            debug: true,
            rules: {
                author: "required",
                quote: "required"
            },
            messages: {
                author: "Name of Author required"
                quote: "Please enter Quote"
            },
            errorPlacement: function(error, element) {
                error.appendTo( element.parent().top() );
            }
      );
  });
  </script>

<body>

<div class="container">
<div class="center_div">
<h2>Submit Your Quote</h2>
<fieldset>
<form id="submitForm" action="qinsert.php" method="post">
<div class="error" style="display:none"></div>
<div class="field">
<label>Author: </label>
<input name="author" type="text" class="required" minLength=3>
<span class="error"></span>
</div><br />
<div class="field">
<label>Quote: </label>
<textarea name="quote" cols=22 class="required" minLength=5></textarea>
<span class="error"></span>
<br />
</div>
<input id="button1" type="submit" value="Submit" class="submit" /><br />
<input id="button2" type="reset" value="Reset" /> 
</form>
</fieldset>
</div>
</div>

what is wrong with the code? thank you!

Answers


Just a quick glance, it looks like you are missing a closing '}' in your javascript. I think you are not closing the validate({ correctly. Try to add the } brace in front of your ); after the errorPlacement function.

  $(document).ready(function(){ 
var validator = $("#submitForm").validate({ 
        debug: true, 
        rules: { 
            author: "required", 
            quote: "required" 
        }, 
        messages: { 
            author: "Name of Author required" 
            quote: "Please enter Quote" 
        }, 
        errorPlacement: function(error, element) { 
            error.appendTo( element.parent().top() ); 
        } 
  }); 
  }); 

I haven't used jquery validation plugin before, but there is obviously a missing comma here:

messages: 
{
            author: "Name of Author required",
            quote: "Please enter Quote"
},

Don't have this plugin by hand so I cannot get a sample running code now.

Personally I feel a declarative way of validation is more appealing to me, which means rather than put the validation requirements directly into your javascript code, you can declaratively mark them inside html. The validation engine then will go check each required field, etc...

If this sounds reasonable to you, then I recommend another validation plugin : jQuery inline validation


Check the path to your jQuery libraries. Them being in a directory named ~ and suffixed with / seems unlikely. If they are in the same directory the correct syntax is:

<script type="text/javascript" src="jquery.js"></script>

Need Your Help

Python: get the string between two capitals

c++ python string

I'd like your opinion as you might be more experienced on Python as I do.