HTML form doesn't get validated

Question

I am struggling to validate a simple form and i just cant figure what's wrong. Here is a simple example that doesn't validate:

<form name="loginForm">
  <input type="email" name="email" id="email" required/>
  <input type="submit" value="save" />
</form>

Look here: http://jasonwatmore.com/post/2018/05/10/angular-6-reactive-forms-validation-example Also post the logic you are using in the .ts please — Jacopo Sciampi, Sep 19 '18 at 09:14
Possible duplicate of [HTML5 Email Input Pattern Attribute](https://stackoverflow.com/questions/5601647/html5-email-input-pattern-attribute) — Leo, Sep 19 '18 at 09:47

score 0 · Answer 1 · answered Sep 19 '18 at 09:23

Using the type="email" will validate "a@b" which, of course, is an invalid email address.

You could use a pattern to validate the email address, like so:

<form name="loginForm">
  <input type="email" name="email" id="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"/>
  <input type="submit" value="save" />
</form>

SarahB · Answer 2 · 2018-09-19T11:25:49.127

Your code seems ok. With your code. If you want to test if your form is ok you can add a form action to redirect user after the right submit of your form like this (with action = "newPage.html):

<body>
<form id="loginForm" action="newPage.html">  
    Your mail:
    <input type="email" name="email" id="email" required/>

    <input type="submit" value="Save form" />
</form>

So now to test, you have to create the "newPage.html" file with the body you want:

<body>
   <p>good submit</p>
</body>

If the new page appears, it's ok for your submit!

HTML form doesn't get validated

2 Answers2