How to validate a letter and whitespace only input via JavaScript regular expression

Question

I have an input type="text" for names in my HTML code. I need to make sure that it is a string with letters from 'a' to 'z' and 'A' to 'Z' only, along with space(s).

This is my HTML code:

<form action="" name="f" onsubmit="return f1()">
                Name : <input type="text" name="name">

I'm expecting my JavaScript to be something like this:

function f1() 
{  
   var x=document.f.name.value;  
   ..... 
   ..... 
   return false;
}

PS: I'm not really familiar with Regular Expressions, so please do put up an explanation with the code.

regex Anyway if u are going to store that in a database make sure u do serverside validation as well — DarkBee
– DarkBee, Commented Jul 27, 2013 at 14:58

Konsole · Accepted Answer · 2013-07-27 15:07:36Z

25

You can use javascript test() method to validate name field. The test() method tests for a match in a string.

/^[A-Za-z\s]+$/.test(x) //returns true if matched, vaidates for a-z and A-Z and white space

or

/^[A-Za-z ]+$/.test(x)

edited Jul 27, 2013 at 15:07

answered Jul 27, 2013 at 14:58

Konsole

3,4753 gold badges31 silver badges41 bronze badges

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

Comments

Frederik.L · Accepted Answer · 2017-01-13 17:09:17Z

12

If you are building something for modern browsers, there is something very pleasurable in HTML5:

<input id="username" name="name" type="text" pattern="[a-zA-Z]{5,}" title="Minimum 5 letters" required />

Reference: HTML5 forms input types

Update 2017/01/17:

Old browsers are quite weak on the market shares nowadays. This is a good practice to use HTML5 features instead of compatibility scripts.

edited Jan 13, 2017 at 17:09

answered Jul 27, 2013 at 15:43

Frederik.L

5,6202 gold badges33 silver badges41 bronze badges

2 Comments

Arthur Tarasov Over a year ago

does this only work in a form with a standard submit button? I ran this in a standalone input field with a javascript listener for submit and it didn't do much.

Frederik.L Over a year ago

@ArthurTarasov You need to tell the form that your button is submitting it: ¨formElement.submit()`. Otherwise there is no way the form can know that your interactions are meant to be validated.

twinlakes · Accepted Answer · 2013-07-27 14:58:51Z

7

check out regular expressions and patterns.

function f1() 
{  
   var x=document.f.name.value;  
   return /^[A-z ]+$/.test(x);
}

answered Jul 27, 2013 at 14:58

twinlakes

10.5k8 gold badges36 silver badges47 bronze badges

Comments

Johansrk · Accepted Answer · 2015-09-07 13:22:41Z

Here is a longer regx. It looks for a-z in all languages latin etc.. you can also write hyphen - underscore _ dot . as well as space

var reg =  /^[a-zA-Z._-\s{1}\u00C6\u00D0\u018E\u018F\u0190\u0194\u0132\u014A\u0152\u1E9E\u00DE\u01F7\u021C\u00E6\u00F0\u01DD\u0259\u025B\u0263\u0133\u014B\u0153\u0138\u017F\u00DF\u00FE\u01BF\u021D\u0104\u0181\u00C7\u0110\u018A\u0118\u0126\u012E\u0198\u0141\u00D8\u01A0\u015E\u0218\u0162\u021A\u0166\u0172\u01AFY\u0328\u01B3\u0105\u0253\u00E7\u0111\u0257\u0119\u0127\u012F\u0199\u0142\u00F8\u01A1\u015F\u0219\u0163\u021B\u0167\u0173\u01B0y\u0328\u01B4\u00C1\u00C0\u00C2\u00C4\u01CD\u0102\u0100\u00C3\u00C5\u01FA\u0104\u00C6\u01FC\u01E2\u0181\u0106\u010A\u0108\u010C\u00C7\u010E\u1E0C\u0110\u018A\u00D0\u00C9\u00C8\u0116\u00CA\u00CB\u011A\u0114\u0112\u0118\u1EB8\u018E\u018F\u0190\u0120\u011C\u01E6\u011E\u0122\u0194\u00E1\u00E0\u00E2\u00E4\u01CE\u0103\u0101\u00E3\u00E5\u01FB\u0105\u00E6\u01FD\u01E3\u0253\u0107\u010B\u0109\u010D\u00E7\u010F\u1E0D\u0111\u0257\u00F0\u00E9\u00E8\u0117\u00EA\u00EB\u011B\u0115\u0113\u0119\u1EB9\u01DD\u0259\u025B\u0121\u011D\u01E7\u011F\u0123\u0263\u0124\u1E24\u0126I\u00CD\u00CC\u0130\u00CE\u00CF\u01CF\u012C\u012A\u0128\u012E\u1ECA\u0132\u0134\u0136\u0198\u0139\u013B\u0141\u013D\u013F\u02BCN\u0143N\u0308\u0147\u00D1\u0145\u014A\u00D3\u00D2\u00D4\u00D6\u01D1\u014E\u014C\u00D5\u0150\u1ECC\u00D8\u01FE\u01A0\u0152\u0125\u1E25\u0127\u0131\u00ED\u00ECi\u00EE\u00EF\u01D0\u012D\u012B\u0129\u012F\u1ECB\u0133\u0135\u0137\u0199\u0138\u013A\u013C\u0142\u013E\u0140\u0149\u0144n\u0308\u0148\u00F1\u0146\u014B\u00F3\u00F2\u00F4\u00F6\u01D2\u014F\u014D\u00F5\u0151\u1ECD\u00F8\u01FF\u01A1\u0153\u0154\u0158\u0156\u015A\u015C\u0160\u015E\u0218\u1E62\u1E9E\u0164\u0162\u1E6C\u0166\u00DE\u00DA\u00D9\u00DB\u00DC\u01D3\u016C\u016A\u0168\u0170\u016E\u0172\u1EE4\u01AF\u1E82\u1E80\u0174\u1E84\u01F7\u00DD\u1EF2\u0176\u0178\u0232\u1EF8\u01B3\u0179\u017B\u017D\u1E92\u0155\u0159\u0157\u017F\u015B\u015D\u0161\u015F\u0219\u1E63\u00DF\u0165\u0163\u1E6D\u0167\u00FE\u00FA\u00F9\u00FB\u00FC\u01D4\u016D\u016B\u0169\u0171\u016F\u0173\u1EE5\u01B0\u1E83\u1E81\u0175\u1E85\u01BF\u00FD\u1EF3\u0177\u00FF\u0233\u1EF9\u01B4\u017A\u017C\u017E\u1E93]+$/;
                    return reg.test(val);

quinnirill · Accepted Answer · 2013-07-27 15:22:39Z

1

/^[A-Z ]+$/i.test(x) does the trick according to your specification, but if I were you, I'd add dashes, i.e. /^[-A-Z ]+$/i.test(x), because double-barreled names are quite common. Of course, I'd suggest later revisiting this once JS gets unicode word detection support in its RegExp to support even more names.

EDIT: Actually, if you want to make sure the name is not ill-formed, e.g. there's at least the first name and the last name and there are no extra spaces, you could do something like this: /^(?:[-A-Z]+ )+[-A-Z]+$/i.test(x). I also just remembered you might want to include dots as well, e.g "Henry Jr. Jones". Combined to the previous one this would be: /^(?:[-A-Z]+\.? )+[-A-Z]+$/i.test(x).

edited Jul 27, 2013 at 15:22

answered Jul 27, 2013 at 15:10

quinnirill

8245 silver badges7 bronze badges

Comments

Code · Accepted Answer · 2019-06-17 05:01:33Z

1

 <!--For Character in Textbox Script -->
    <script type="text/javascript">
        function isAlfa(evt) {
            evt = (evt) ? evt : window.event;
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            if (charCode > 32 && (charCode < 65 || charCode > 90) && (charCode < 97 || charCode > 122)) {
                return false;
            }
            return true;
        }

        function toTitleCase(str) {
            return str.replace(/\w\S*/g, function (txt) {
                return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
            });
        }


    </script>
    <!--For Character in Textbox Script -->

answered Jun 17, 2019 at 5:01

Code

7595 silver badges9 bronze badges

Comments

mangesh · Accepted Answer · 2022-05-23 12:09:21Z

1

EDIT: Actually, if you want to make sure the name is not ill-formed, e.g. there's at least the first name and the last name and there are no extra spaces, you could do something like this: /^(?:[-A-Z]+ )+[-A-Z]+$/i.test(x). I also just remembered you might want to include dots as well, e.g "Henry Jr. Jones". Combined to the previous one this would be: /^(?:[-A-Z]+.? )+[-A-Z]+$/i.test(x).

answered May 23, 2022 at 12:09

mangesh

111 bronze badge

2 Comments

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Dani3le_ Over a year ago

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review

Collectives™ on Stack Overflow

How to validate a letter and whitespace only input via JavaScript regular expression

7 Answers 7

Comments

2 Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

2 Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related