validation using jquery

Question

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!

Tommy · Accepted Answer · 2010-04-05 22:57:24Z

1

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() ); 
        } 
  }); 
  });

answered Apr 5, 2010 at 22:57

Tommy

39.9k10 gold badges93 silver badges125 bronze badges

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

1 Comment

Tommy Over a year ago

See comment on your answer post for further explanation on the script tag src attributes

Michael Mao · Accepted Answer · 2010-04-05 23:00:20Z

1

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

answered Apr 5, 2010 at 23:00

Michael Mao

10.3k23 gold badges79 silver badges92 bronze badges

Comments

wombleton · Accepted Answer · 2010-04-05 23:05:31Z

0

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>

answered Apr 5, 2010 at 23:05

wombleton

8,3761 gold badge31 silver badges30 bronze badges

Collectives™ on Stack Overflow

validation using jquery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related