StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POJavaScript validation issue with international characters
text
Body
copied!<p>We use the excellent <a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" rel="noreferrer">validator plugin for jQuery</a> here on Stack Overflow to do client-side validation of input before it is submitted to the server.</p> <p>It generally works well, however, this one has us scratching our heads.</p> <p>The following validator method is used on the ask/answer form for the user name field (note that you must be <strong>logged out</strong> to see this field on the live site; it's on every <code>/question</code> page and the <code>/ask</code> page)</p> <pre><code>$.validator.addMethod("validUserName", function(value, element) { return this.optional(element) || /^[\w\-\s\dÀÈÌÒÙàèìòùÁÉÍÓÚÝáéíóúýÂÊÎÔÛâêîôûÃÑÕãñõÄËÏÖÜäëïöüçÇßØøÅåÆæÞþÐð]+$/.test(value); }, "Can only contain A-Z, 0-9, spaces, and hyphens."); </code></pre> <p>Now this regex looks weird but it's pretty simple:</p> <ul> <li>match the beginning of the string (^)</li> <li>match any of these.. <ul> <li>word character (\w)</li> <li>dash (-)</li> <li>space (\s)</li> <li>digit (\d)</li> <li>crazy moon language characters (àèìòù etc)</li> </ul></li> <li>now match the end of the string ($)</li> </ul> <p>Yes, we ran into the <a href="http://www.hanselman.com/blog/InternationalizedRegularExpressions.aspx" rel="noreferrer">Internationalized Regular Expressions</a> problem. JavaScript's definition of "word character" does not include international characters.. at all.</p> <p>Here's the weird part: even though we've gone to the trouble of manually adding tons of the valid international characters to the regex, it <em>doesn't work</em>. You cannot enter these international characters in the input box for user name without getting the..</p> <blockquote> <p>Can only contain A-Z, 0-9, spaces, and hyphens</p> </blockquote> <p>.. validation return!</p> <p>Obviously <strong>the validation <em>is</em> working for the other parts of the regex</strong>.. so.. what gives?</p> <p>The other strange part is that this validation works in the browser's JavaScript console but not when executed as a part of our standard *.js includes.</p> <blockquote> <p>/^[\w-\sÀÈÌÒÙàèìòùÁÉÍÓÚÝáéíóúýÂÊÎÔÛâêîôûÃÑÕãñõÄËÏÖÜäëïöüçÇßØøÅåÆæÞþÐð]+$/ .test('ÓBill de hÓra') === true</p> </blockquote> <p>We've run into some really bizarre international character issues in JavaScript code before, resulting in some very, very nasty hacks. We'd like to understand what's going on here and why. Please enlighten us!</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