How do I get the jquery validate plugin to only allow text, spaces, periods, and hyphens?

Question

I'm using http://bassistance.de/jquery-plugins/jquery-plugin-validation/ to validate my form. Unfortunately, there is no text only method. So I tried to write my own:

$(document).ready(function(){
$("#staffedit").validate(
    {
        rules: {
        editDisplayName: {
            textonly: true,
            required: true
        }
    }}
    );
jQuery.validator.addMethod(
"textonly", 
function(value, element)
{console.log('textonly called.');
 console.log(/[-.\w\s]/.test(value));
    return this.optional(element) || /[-.\w\s]/.test(value); 
}, 
jQuery.format("Please only enter letters, spaces, periods, or hyphens.")
);
    });

The method gets called, since my console.log function does output to the console at the appropriate times. What I don't understand, is why I can still put $ or * in the input field. I can put anything in there, and it still gets evaluated as valid.

I used http://regexpal.com/ to test the regex, and it works fine there.

So, how do I get the plugin to only allow text, spaces, periods, and hyphens?

On a side note, I'd also like to allow characters with accents, like à, É, ā, or ô...

score 1 · Accepted Answer · edited May 23 '17 at 11:50

The problem was with how the test() function works. It returns true if it makes any match. That's what had me so confused. The regex's I was using were actually doing what I thought they should. See http://www.w3schools.com/jsref/jsref_regexp_test.asp

/[^-\.a-zA-Z\s]/.test("David"); //Returns false
/[^-\.a-zA-Z\s]/.test("Davi$ *d"); //Returns true
//without the ^
/[-\.a-zA-Z\s]/.test("Davi$ *d"); //Returns true
/[-\.a-zA-Z\s]/.test("David"); //Returns true

As you can see, that's not very helpful. So what I did was pull the test out of the return statement. Like this:

$(document).ready(function(){
$("#staffedit").validate(
    {
        rules: {
        editDisplayName: {
            textonly: true,
            required: true
        }
    }}
    );
jQuery.validator.addMethod(
"textonly", 
function(value, element)
{
    valid = false;
    check = /[^-\.a-zA-Z\s\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02AE]/.test(value);
    if(check==false)
        valid = true;
    return this.optional(element) || valid;
}, 
jQuery.format("Please only enter letters, spaces, periods, or hyphens.")
);
});

So I check to see if any of the characters I don't want exist, if they don't test() returns false, so it's valid.

I also figured out the unicode stuff. [\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02AE] matches a bunch of stuff, I used http://en.wikipedia.org/wiki/List_of_Unicode_characters to figure out what to put in. I think I got everything I wanted. Thanks to Kyle Schmidt for posting the link to Javascript + Unicode regexes that helped me figure out the \u syntax. I should probably check the unicode a bit more thoroughly, but that should be enough for now.

Problem solved.

Instead of using a seperate "valid" variable you could also either use `return this.optional(element) || !check)` or remove the negation from the RegEx by removing the caret `^`. — Laoujin, Aug 21 '12 at 09:29

score 0 · Answer 2 · answered Jul 18 '12 at 20:42

0

If you get the additional methods js there's a letters validator in there

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/additional-methods.js

You want letterswithbasicpunc I believe

answered Jul 18 '12 at 20:42

Andrew Walters

4,763
6
35
49

Except that letterswithbasicpunc includes stuff I don't want. Thanks for pointing out the additional-methods.js file. I had forgotten about it, it will come in handy in the future. – David R. Jul 18 '12 at 22:08

Kyle Schmidt · Answer 3 · 2012-07-18T21:03:12.077

0

Putting the ^ inside a character class will negate what's in the character class. I'd go for [-.\w\s]

edited Jul 18 '12 at 21:03

answered Jul 18 '12 at 20:57

Kyle Schmidt

318
4
15

Thoughts on how to do à, É, ā, or ô? – David R. Jul 18 '12 at 21:04
Interestingly enough, \w includes numerical characters. So it wasn't what I want. I ended up with [^-\.a-zA-Z\s]. Haven't figured out the unicode stuff yet. – David R. Jul 18 '12 at 21:56

How do I get the jquery validate plugin to only allow text, spaces, periods, and hyphens?

3 Answers3