why isn't my validator working?_问答_开发者_运维开发者技术经验分享

can anybody tell me why is the following code not working?

<script type="text/javascript" src="../../Scripts/jquery.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.validate.js"></script>
    <script type="text/javascript">
    $(function() {
        // validate contact form on keyup and submit
        $("#myform").validate({
            //set the rules for the fild names
            rules: {
                hour: {
                    required: true,
                    minlength: 2,
                    range:[0,23]
                },
                minute: {
                    required: true,
       开发者_如何学编程             minlength: 2,
                    range:[0,60]
                },
            },
            //set messages to appear inline
            messages: {
                hour: "Please enter a valid hour",
                minute: "Please enter a valid minute"
            }
        });

    });
</script>
 <style type="text/css">
.error {
    color: red;
    font: 12pt verdana;
    padding-left: 10px
}
</style>

   <form id="myform" method="" action="">

   <input id="hour" type="text" name="hour" style="width:30px; text-align:center;"></input> :

    <input id="minute" type="text" name="minute" style="width:30px; text-align:center;"></input>
  <br/>
  <input type="submit" value="Validate!" />
</form>

thanks a million in advance, Lina

I can't see anything wrong with your code. Make sure that the address of the included scripts is correct. Here's a working example using jquery and jquery.validate from Microsoft CDN:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>test</title>
    <style type="text/css">
    .error {
        color: red;
        font: 12pt verdana;
        padding-left: 10px
    }
    </style>
</head>
<body>
   <form id="myform" action="">
       <input id="hour" type="text" name="hour" style="width:30px; text-align:center;" /> :
       <input id="minute" type="text" name="minute" style="width:30px; text-align:center;" />
       <br/>
       <input type="submit" value="Validate!" />
    </form>

    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate.min.js"></script>
    <script type="text/javascript">
    $(function() {
        // validate contact form on keyup and submit
        $("#myform").validate({
            //set the rules for the fild names
            rules: {
                hour: {
                    required: true,
                    minlength: 2,
                    range:[0,23]
                },
                minute: {
                    required: true,
                    minlength: 2,
                    range:[0,60]
                },
            },
            //set messages to appear inline
            messages: {
                hour: "Please enter a valid hour",
                minute: "Please enter a valid minute"
            }
        });

    });
    </script>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Simple Form Validation</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#myform").validate({
        //set the rules for the fild names
        rules: {
            hour: {
                required: true,
                minlength: 2,
                range:[0,23]
            },
            minute: {
                required: true,
                minlength: 2,
                range:[0,60]
            },
        },
        //set messages to appear inline
        messages: {
            hour: "Please enter a valid hour",
            minute: "Please enter a valid minute"
        }
    });
});
</script>

<style type="text/css">
.error {
    color: red;
    font: 12pt verdana;
    padding-left: 10px
}
</style>
</head>

<body>
    <form id="myform" method="" action="">
        <input id="hour" type="text" name="hour" style="width:30px; text-align:center;"></input>
        <input id="minute" type="text" name="minute" style="width:30px; text-align:center;"></input>
        <br/>
        <input type="submit" value="Validate!" />
    </form>
</body>
</html>

is working