I have an HTML form that uses special characters in ids (:, -, _). The form uses the jQuery validation plugin to validate user input. In particular, the identifier contains a GUID. The following is an example code:
<script src="../../Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-validate/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(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"
}
}
});
});
</script>
</head>
<body>
<form action="/Home/Submit" method="post" id="respondForm">
<div>
<div class="error-container">
<ul>
</ul>
</div>
</div>
<div>
<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" />
<br />
<input type="submit" name="submit" value="Submit" />
<br />
</div>
</form>
As you can see, the input type text element has an id / name like " Input:_CDD66FA6-D190-434D-AF51-8272F64E0646_14ecbb3f-c0e0-4caf-b03a-013d12118405"
If I run this page in a browser, I get a JavaScript error:
Webpage Error Details
Message: Expected '}'
Line: 23
Char: 50
Code: 0
URI: http: // localhost: 64603 /
The error points to this line:
function(element, errorClass) {
$(element).css({ backgroundColor: '#FFFF88' });
}
,
errorLabelContainer: $("ul", $('div.error-container')),
wrapper: 'li',
***[Line 23] -----> rules: { Input:_CDD66FA6-D190-434D-AF51-8272F64E0646_14ecbb3f-c0e0-4caf-b03a-013d12118405:***
How to resolve this?