CODEWITHSUNDEEP
jqueryvalidationautocompletejquery-validate
sairn
sairn

Reputation: 490

How do I successfully apply jquery validation rules to a jQuery autocomplete "input" field?

How do I successfully apply jquery validation rules to a jQuery autocomplete "input" field?

To further explain, in the example, below:

  1. jquery validation works as expected for the "state" input field - i.e., it produces a validation message upon form submittal.

  2. jquery validation does NOT work for "acstate" input field - i.e., it DOES NOT produce a validation message upon form submittal.

Thanks for any help/guidance you can provide!

FWIW - Here is the example I'm using:

    <link rel="stylesheet" type="text/css" media="screen" href="css/redmond/jquery-ui-1.10.2.custom.css" />
    <script src="js/jquery-1.9.1.js" type="text/javascript"></script>     
    <script src="js/jquery-ui-1.10.2.custom.js" type="text/javascript"></script>
    <script src="js/jquery.validate.js" type="text/javascript"></script>         

    <script type="text/javascript">
        /* <![CDATA[ */

        $(document).ready(function() {

            $("#form1").validate({
                rules: {
                    state: {
                        required: true,
                        minlength: 2
                    },
                    acstate: {
                        required: true,
                        minlength: 2                            
                    }
                },
                messages: {
                    state: {
                        required: "state required",
                        minlength: "min length {0}"
                    },
                    acstate: {
                        required: "acstate required",
                        minlength: "min length {0}"                            
                    }
                }
            });

            $("#acstate").autocomplete(
            {
                source: "AZ,CA,DC,MD,NM,NV,VA".split(",")                     
            });

            $("#submit").click(function() {
                if ($("#form1").valid())
                {
                    alert("VALID");
                }
                else
                {
                    alert("INVALID");
                }
            });
        });

If you need to see the entire HTML...

    <?xml version='1.0' encoding='UTF-8' ?>
    <!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>acvalid</title>

            <link rel="stylesheet" type="text/css" media="screen" href="css/redmond/jquery-ui-1.10.2.custom.css" />
            <script src="js/jquery-1.9.1.js" type="text/javascript"></script>     
            <script src="js/jquery-ui-1.10.2.custom.js" type="text/javascript"></script>
            <script src="js/jquery.validate.js" type="text/javascript"></script>         

            <script type="text/javascript">
                /* <![CDATA[ */

                $(document).ready(function() {

                    $("#form1").validate({
                        rules: {
                            state: {
                                required: true,
                                minlength: 2
                            },
                            acstate: {
                                required: true,
                                minlength: 2                            
                            }
                        },
                        messages: {
                            state: {
                                required: "state required",
                                minlength: "min length {0}"
                            },
                            acstate: {
                                required: "acstate required",
                                minlength: "min length {0}"                            
                            }
                        }
                    });

                    //statelistdata = "AZ,CA,DC,MD,NM,NV,VA";

                    $("#acstate").autocomplete(
                    {
                        source: "AZ,CA,DC,MD,NM,NV,VA".split(",")                     
                    });

                    $("#submit").click(function() {
                        if ($("#form1").valid())
                        {
                            alert("VALID");
                        }
                        else
                        {
                            alert("INVALID");
                        }
                    });
                });

                /* ]]> */
            </script>

        </head>
        <body>
            <form id="form1">
                <table>
                    <tr>
                        <td><label for="state" >regular state input:</label></td>
                        <td><input id="state" class="required" minlength="2" maxlength="2"/></td>
                    </tr>
                    <tr>
                        <td><label for="acstate" >'autocomplete' state input:</label></td>
                        <td><input id="acstate" class="required" minlength="2" maxlength="2"/></td>
                    </tr>
                </table>
                <input type="submit" id="submit" value="Submit" />                            
            </form>
        </body>
    </html>

Upvotes: 1

Views: 3053

Answers (1)

Sparky
Sparky

Reputation: 98718

Your main problem is that your input elements are missing name attributes. The input names inside the rules declared in the .validate() function only reference the name attributes. 

<input name="state" id="state" class="required" minlength="2" maxlength="2"/>
<input name="acstate" id="acstate" class="required" minlength="2" maxlength="2"/>

Upvotes: 3

Related Questions