HTML pattern - Regular Expression not working in Dreamweaver and nowhere locally.

[limakid2015]

My pattern in the html form is very simple 

<form>
<input type="text" pattern="[A-Za-z]{2,30}" required>
<!--SEND button bla bla bla...-->
</form>

Why the input still accepts characters like $ ^ % @ #...??? They are VALIDATED like correct, valid characters. I wanted to accepot unicode characters, so I've been implementing the `\p{L}` and similar, so I understabnd that some characters are difficult to restrain or filter but to this `A-Z`, so basic, accepting symbols and numbers??? confusses me. Or DW regex don‘t work at all in local environment? If field is empty I got the client validation of Bootstrap, because I am using Bootstrap utilities too. I have also server side validation. Three pictures attached. 1. If Empty, red message advises me. 2. The wrong characters typed. 3. Correct VALIDATION with the wrong characters, so the PATTERN didn't work. Orientations, please.

[Nancy OShea]

Form valiation won't do anything while you're typing. That's not how HTML5 forms work. 

Validation occurs when the form submit button is tapped.  As you can see from this screenshot, the HTML5 form validation works and the pattern attribute does exactly what it's expected to do.

Hope that helps.

[limakid2015]

I am using Bootstrap and I set «novalidate», because I expect the “nice” validation messages (valid or invalid / green or red feedback from Bootstrap). What you show is the browser validation. I guess that pattern is not so reliable, I will go for pure javascript validation on the client side, let‘s see what happens. Of course, I also have a server side validation, but my concern for now is what happen with the Pattern attribute.

The Bootsrap validation tools allow me to see, yes, if I am typing the right characters, the input border becomes green color as long as the characters are the correct ones. 

This is something wrong. The border should be RED, not green, because the pattern is just [A-Za-z]{2,30}. It confusses me. Ok, I will try full javascript custom validation. Thank U.

[Nancy OShea]

With Bootstrap 5 forms, you set the default class of invalid-feedback or valid-feedback . Which class is expressed on your patterned form field? 

See this related link for more details on Bootstrtap 5 form validation: https://getbootstrap.com/docs/5.0/forms/validation/

[limakid2015]

This is the first block from the begining of the form and the first div containing the text field of the issue (nombre). I added a valid-feedback class.

[limakid2015 · Accepted solution]

FINALLY, at 07:15 in the morning I got this pattern:

pattern="([\p{L}\p{M}]+[\s'‘-]*){2,30}"

This is what I expected, actually. Maybe not 100% perfect. Now I have to see the server side. This is just using the PATTERN attribute. WHAT HAPPENED? I guess that there was a problem with the interface. In the properties, when focussing th INPUT, the PATTERN field was empty even when it was codeed in the HTML (code view). It was surprising for me. I just tried to make the pattern appears in the respective field and it worked.

Weird things of the dreamweaver, but I still love it.

[BenPleysier]

This will help you out https://formvalidation.io/

[limakid2015]

Thank U, Mr. Ben. I will check it.