jQuery regexp validation

Question

I would like to validate user input client side with a little jQuery function that is called onsubmit on my form. I want the field #fname (first name) to only allow a-z, A-Z and space. The return false is supposed to be stopping the form from submitting.

function validateregister(){
    if (!($("fname") =~ [a-zA-Z ])) {
        return false;
    }
}

This is my HTML:

<input type="submit" value="Join now!" id="registersubmit" class="paddingoutline2" onsubmit="return validateregister()">

Of course, i'm going to validate the user input on the server side later on. When I submit the form, it gives me an "internal server error". This makes me think that I made an error in my function validateregister(). Is there anything wrong? If the I'm pretty new to jQuery so any help is appreciated.

Thanks!

The =~ is Perl syntax, not Javascript.

MikeM
– MikeM

2013-03-28 14:55:00 +00:00
Commented Mar 28, 2013 at 14:55 — MikeM
– MikeM, Commented Mar 28, 2013 at 14:55

Denys Séguret · Accepted Answer · 2013-03-28 14:48:09Z

4

What you want is

function validateregister(){
    return /^[a-zA-Z ]+$/.test($('#fname').val());
}

Apart fixing the selector suggesting the use of the val and test functions, I took the liberty to change the regex :

^ and $ force the test to cover the whole string
the + requires at least one character

But are you aware that this regex might be too strict if you want people to type their real first name ? Yours, for example, would not pass...

edited Mar 28, 2013 at 14:48

answered Mar 28, 2013 at 14:42

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

LPB Over a year ago

That's something I had not thought about, you're absolutely right i'm missing a lot of characters. Thanks for pointing that out! Is it normal that it returns false and that the webpage still submits the form? I would like it to stay on the same webpage and only show an error message.

Denys Séguret Over a year ago

onsubmit should be on the form element, not on the submit one.

Denys Séguret Over a year ago

De rien, ce fut un plaisir ;)

Jai · Accepted Answer · 2013-03-28 14:58:12Z

You have to use regex this way:

function validateregister(){
    var nameRgx = /[a-zA-Z]/;
    var phoneRgx = /[0-9]/;
    if (!nameRgx.test($("#fname").val())) {
       return false;
    }
    if (!phoneRgx.test($("#phone").val())) {
       return false;
    }
}

And make sure to refer your elements with Either with # id notation or . class notation. In your code you are not referencing your elem in a proper way.

^ ---->Start of a string. 
$ ---->End of a string. 
. ----> Any character (except \n newline) 
{...}----> Explicit quantifier notation. 
[...] ---->Explicit set of characters to match. 
(...) ---->Logical grouping of part of an expression. 
* ---->0 or more of previous expression. 
+ ---->1 or more of previous expression. 
? ---->0 or 1 of previous expression; 
       also forces minimal matching when an expression might 
       match several strings within a search string.

More Info about Regex writing

Collectives™ on Stack Overflow

jQuery regexp validation

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related