Databases
StackOverflow2013
Postsdbo
POHow to handle special characters in html element id/name in Jquery validation?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to handle special characters in html element id/name in Jquery validation?
    text
    copied!<p>I have a HTML form which uses special characters in ids ( :,-,_ ). The form uses JQuery validation plugin to validate the user input. Specifically the id includes a GUID, Following is the sample code:</p> <pre><code>&lt;script src="../../Scripts/jquery-1.3.2.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="../../Scripts/jquery-validate/jquery.validate.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function() { $('#respondForm').validate({ onclick: false, onkeyup: false, onfocusout: false, highlight: function(element, errorClass) { $(element).css({ backgroundColor: '#FFFF88' }); } , errorLabelContainer: $("ul", $('div.error-container')), wrapper: 'li', rules: { Input:_CDD66FA6-D190-434D-AF51-8272F64E0646_14ecbb3f-c0e0-4caf-b03a-013d12118405: { required: true , minlength: 5 , maxlength: 10 } } , messages: { firstName: { required: "xxx_Required" , minlength: "XXX Should be greater than 5" , maxlength: "XXX Cannot be greater than 10" } } }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;form action="/Home/Submit" method="post" id="respondForm"&gt; &lt;div&gt; &lt;div class="error-container"&gt; &lt;ul&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;div&gt; &lt;input type="text" id="Input:_CDD66FA6-D190-434D-AF51-8272F64E0646_14ecbb3f-c0e0-4caf-b03a-013d12118405" name="Input:_CDD66FA6-D190-434D-AF51-8272F64E0646_14ecbb3f-c0e0-4caf-b03a-013d12118405" /&gt; &lt;br /&gt; &lt;input type="submit" name="submit" value="Submit" /&gt; &lt;br /&gt; &lt;/div&gt; &lt;/form&gt; </code></pre> <p>As you can observe input type text element has the id/name as "<code>Input:_CDD66FA6-D190-434D-AF51-8272F64E0646_14ecbb3f-c0e0-4caf-b03a-013d12118405</code>"</p> <p>If I run this page in the browser, I receive a JavaScript error:</p> <blockquote> <p>Webpage error details</p> <p>Message: Expected '}'<br> Line: 23<br> Char: 50<br> Code: 0<br> URI: <a href="http://localhost:64603/" rel="nofollow noreferrer">http://localhost:64603/</a> </p> </blockquote> <p>The error is pointing to this line:</p> <pre><code>function(element, errorClass) { $(element).css({ backgroundColor: '#FFFF88' }); } , errorLabelContainer: $("ul", $('div.error-container')), wrapper: 'li', ***[Line 23] -----&gt; rules: { Input:_CDD66FA6-D190-434D-AF51-8272F64E0646_14ecbb3f-c0e0-4caf-b03a-013d12118405:*** </code></pre> <p>How do I resolve this?</p>
 

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