0

I'm using rules with the 'id' as it gives me more flexibility where hooking this up to a django project the main issue being where a field name of a model is 'name' (name="name") - which appears to be a reserved word in JavaScript.

According to the docs it looks like what I want to do is possible and I'm pretty much using the exact example as given here: http://jqueryvalidation.org/rules/?rdfrom=http%3A%2F%2Fdocs.jquery.com%2Fmw%2Findex.php%3Ftitle%3DPlugins%2FValidation%2Frules%26redirect%3Dno#.22add.22rules

Problem is I'm not getting back any of the custom error messages specified, rather I'm guessing the defaults are being returned. ie. If nothing is entered I will get the default error message back:

"This field is required"

As opposed to my custom message:

"Required input"

If I enter 1 character I get:

"Please enter at least 2 characters"

As opposed to my custom message:

"Please, at least {0} characters are necessary"

I'm running Ubuntu 12.04 and am seeing the same behavior in both Firefox and Chrome.

I'm pretty much a novice when it comes to JQuery so I'm hoping that there's an obvious problem with my copying and pasting from the docs that I've overlooked... Any advice would be appreciated.

I've included my code below.

<!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-Language" content="en-us" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>jQuery Example 3</title>

    <script type="text/javascript" language="javascript" src="Scripts/jquery-1.2.6.js"></script>
    <script type="text/javascript" language="javascript" src="Scripts/jquery.validate.js"></script>
    <script type="text/javascript" language="javascript">
        //Our validation script will go here.
        $(document).ready(function(){
            // Set up validation based around the id.
            $("#form1").validate();

            $( "#fname1" ).rules( "add", {
                required: true,
                minlength: 2,
                messages: {
                    required: "Required input",
                    minlength: jQuery.format("Please, at least {0} characters are necessary")
                }
            });

            $("#lname1").rules("add", {
                required: true
            });
        });
    </script>

    <style type="text/css">
    #container {
        width: 350px;
        height: 8em;
        border: 1px #009933 solid;
        background-color:#66FF66;
        display:block;
    }

    label, input{
        margin:2px 0px 1px 4px;
    }

    label {
        margin-top:3px;
        font-family:"Times New Roman", Times, serif;
        font-size:1.1em;
    }
    </style>
</head>

<body>
<div id="container">
    <form id="form1">
        <label for="fname1">First Name: </label><br />
        <input name="txtFirstName" type="text" id="fname1" /><br />
        <label for="lname1">Last Name:</label><br />
        <input name="txtLastName" type="text" id="lname1" title="Please Enter a Last Name"/><br />
        <input type="submit" value="Submit" id="btnSubmit"  />  
    </form>
</div>
</body>
</html>
4

1 回答 1

0

Your code works fine I have tested it , mabye the second message is confusing you a little bit:

If I enter 1 character I get:

"Please enter at least 2 characters"

As opposed to my custom message:

"Please, at least {0} characters are necessary"

{0} is just a placeholder and it will get filled with the value of minlength so you are getting you custom message.

I have copy/pasted your code and tested it without changing anything and it seems to work fine : 

<!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-Language" content="en-us" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>jQuery Example 3</title>

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" language="javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.js"></script>
    <script type="text/javascript" language="javascript">
        //Our validation script will go here.
        $(document).ready(function(){
            // Set up validation based around the id.
            $("#form1").validate();

            $( "#fname1" ).rules( "add", {
                required: true,
                minlength: 5,// changed it to 5 just to test the placeholder 
                messages: {
                    required: "You custom message ",
                    minlength: jQuery.format("Please, at least {0} characters are necessary")
                }
            });

            $("#lname1").rules("add", {
                required: true
            });
        });
    </script>

    <style type="text/css">
    #container {
        width: 350px;
        height: 8em;
        border: 1px #009933 solid;
        background-color:#66FF66;
        display:block;
    }

    label, input{
        margin:2px 0px 1px 4px;
    }

    label {
        margin-top:3px;
        font-family:"Times New Roman", Times, serif;
        font-size:1.1em;
    }
    </style>
</head>

<body>
<div id="container">
    <form id="form1">
        <label for="fname1">First Name: </label><br />
        <input name="txtFirstName" type="text" id="fname1" /><br />
        <label for="lname1">Last Name:</label><br />
        <input name="txtLastName" type="text" id="lname1" title="Please Enter a Last Name"/><br />
        <input type="submit" value="Submit" id="btnSubmit"  />  
    </form>
</div>
</body>
</html>
于 2013-06-06T01:00:48.907 回答