6

I am using HTML5 'pattern' attribute with 'required' for validation of input boxes. HTML5's required attribute works but it can accept spaces and tabs which is not good because user will just put spaces then. I need regex such that it will accepts space and tabs but able to count only character's. Example "ronny jones" this should give 10.

In javascript we do it using something like this, I am looking for similar thing in HTML5

      var name = document.forms['contact']['name'].value.replace(/ /g,""); // remove whitespace
  if(name.length<6){  // count number of character.
     document.getElementById('message').innerHTML="Enter correct Name";   
     return false;
  }

I found one related question to this on SO : Is there a minlength validation attribute in HTML5? but it accepts spaces and tabs, which I don't want.

Below is my code with HTML5 pattern,

    <input type="text" name="name" class="form-control" placeholder="Your Full Name" pattern="[A-Za-z]{6,}" title="Name should have atleast 6 characters." required="" />
Community
  • 1
  • 1
WeAreRight
  • 885
  • 9
  • 24
  • Use "min" html5 attribute it works great and you need to update your regex as follow: `pattern="([a-zA-Z ]+)"`. your complete html input: `` – Sorangwala Abbasali Jan 19 '17 at 05:10
  • @SorangwalaAbbasali not working at all. – WeAreRight Jan 19 '17 at 05:17
  • Try this regex and keep the min attribute as it is: `^\w+( +\w+)*$`. It will allow first letters and then a possible space and then words & numbers – Sorangwala Abbasali Jan 19 '17 at 05:18
  • @SorangwalaAbbasali not working for "Anthony " . There is space after Anthony – WeAreRight Jan 19 '17 at 05:30
  • try this: `pattern="^[a-zA-Z0-9_.,*""\\/']+[a-zA-Z0-9_.,*""\\/' ]+$"` – Sorangwala Abbasali Jan 19 '17 at 05:33
  • @SorangwalaAbbasali I think "min" attribute doesn't work with text input. Due to this reason it doesn't look for number of characters. So it work with "A" also , which is not right. – WeAreRight Jan 19 '17 at 05:38
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/133512/discussion-between-jone-dotosvky-and-sorangwala-abbasali). – WeAreRight Jan 19 '17 at 05:42
  • Just chiming in that there's "minlength" you want, not "min". But interesting question - I can't get anything to work either; there is a /x modifier in regex which means "ignore spaces" but you can't use the modifiers... – Robbie Jan 19 '17 at 06:02

2 Answers2

9

I managed a silly hack that does what you asked:

<input type="text" name="name" class="form-control" placeholder="Your Full Name" pattern="\s*(\S\s*){6,}" title="Name should have at least 6 characters." required="" />

There must be 6 non-space characters for this to pass. so "asdfgh", " abc def " will work, but "abc de" fails.

It DOES NOT work for your comment about "there's a space after Anthony" but as Anthony contains 6 characters, then it's fine? If not, can you clarify further in the question.

To explain how it works:

  • it takes a pattern of "take 1 non-space character" \S followed by "none-or-more space characters" \s*
  • you need the pattern to be matched 6 or more times (pattern){6,} i.e. (\S\s*){6,}
  • then allow non-or-more spaces at the front \s*

If you want to limit the characters allowed to Alpha only, change the \S to [A-Za-z].

Yes, it's a hack IMO as it will be hell to parse internally on long strings. But does the job. You might want to mix with maxlength to limit that as well?

Wiktor Stribiżew
  • 607,720
  • 39
  • 448
  • 563
Robbie
  • 17,605
  • 4
  • 35
  • 72
  • Give some space before text , it will not work Ex. " Anthony" – WeAreRight Jan 19 '17 at 06:17
  • Yes, it is working. Can you explain what you have done in pattern? Also , some good resource to learn this type of regular expression. That will be a great help. Thank You. – WeAreRight Jan 19 '17 at 06:25
  • @Robbie your regex pattern can be simplified to `(\S\s*){6,}` (the initial `\s*` isn't required, `\S` matches any non-whitespace characters, `\s` doesn't need to be in square brackets `[` `]` and `{1,1}` is pointless since that's the default behaviour). Great answer though! – ctwheels Sep 18 '17 at 16:27
4
 <form action="demo.php">
    <input id="name" type="text" pattern="^((?:\s*[A-Za-z]\s*){6,})$">
    <input type="submit">
 </form>

this will work for your case .. its exacly how you want it. i have set limit of character is from 6 to 40..

Himesh Suthar
  • 562
  • 4
  • 14
  • Look in my question , it already contains javascript code for doing things. I need to do it in HTML5 with the help of pattern. – WeAreRight Jan 19 '17 at 05:18
  • @JoneDotosvky ok got it. let me check – Himesh Suthar Jan 19 '17 at 05:20
  • @JoneDotosvky check my updated ans.. i have checked it.. its working ..try it – Himesh Suthar Jan 19 '17 at 06:03
  • Thanks buddy but When you give space after text it doesn't work Ex."Anthony__" – WeAreRight Jan 19 '17 at 06:21
  • @JoneDotosvky This one is fixable by adding \s* at the end (just like my answer has \s* at the start). They are essentially the same hacky technique but this one limits to 40 characters and forces only alpha characters. Mix and match the two options. – Robbie Jan 19 '17 at 06:31
  • @JoneDotosvky i have corrected that problem you faced in after text space . check my updated answer – Himesh Suthar Jan 19 '17 at 07:11
  • @Himesh Suthar : Thanks for providing the pattern, it is working fine and i have also updated your pattern to allow numbers and (.) in value. **pattern="^((?:\s*[A-Za-z0-9.^]\s*){6,})$"** – Gobind Gupta Jul 02 '18 at 07:13