jQuery Validate rules wont apply

Question

I am trying to use jQuery validate for a form.

I have added

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

My form:

<form id="Main">
  <asp:TextBox ID="Box" name="box" required runat="server"
</form>

At bottom of page

$('#Main').validate();

This works. Which is great. But if I remove the required attr and try say

$('#Main').validate({rules:{box:{required:true}}});

This does not work. For the life of me i cant figure out what I am doing wrong.

In the end I need that input to be required and numeric.

I tried adding 'number' as an attribute but that didn't work either.

some guidance would be great.

Thanks.

Answer 1

There are a number of validation plugins available, after some searching I think I found the plugin you're using based on the usage here.

I created a fiddle to demo how to make a field required and numeric ... click here for fiddle.

Based on the code you provided, it looks like you're only including the base validate.js library. You need to be sure to include the css file, and if you want to use some out of the box validations, such as number validations then you will also need to include the additional-methods.js file. All these files can be found HERE.

Here is the code from the fiddle above..

<form id="myform">
    <input type="text" class="box" id="box" name="box">
    <br/>
    <input id="submit" type="submit" value="Validate!">
</form>

$(document).ready(function()
{
    $("#myform" ).validate(
     {
      rules: 
      {
        box: 
        {
          required: true,
          number: true
        }
      }
    });
});