StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow do I successfully apply jquery validation rules to a jQuery autocomplete "input" field?
text
Body
copied!<p>How do I successfully apply jquery validation rules to a jQuery autocomplete "input" field?</p> <p>To further explain, in the example, below: </p> <ol> <li><p>jquery validation works as expected for the "<strong><em>state</em></strong>" input field - i.e., it produces a validation message upon form submittal.</p></li> <li><p>jquery validation does NOT work for "<strong><em>acstate</em></strong>" input field - i.e., it DOES NOT produce a validation message upon form submittal.</p></li> </ol> <p>Thanks for any help/guidance you can provide!</p> <hr> <h1>FWIW - Here is the example I'm using:</h1> <pre><code> <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"); } }); }); </code></pre> <h1>If you need to see the entire HTML...</h1> <pre><code> <?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> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload