Using pattern and required attribute of input field html at the same time

Question

How can I both validate the pattern of an input field while use required attribute in an html form. I want to make 2 different warning message for each attribute.

<div class="form-group">
                    <label class="col-md-4 control-label">E-Mail</label>  
                    <div class="col-md-4 inputGroupContainer">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
                            <input name="email" placeholder="Địa chỉ E-Mail" class="form-control"  type="text" required 
                                   pattern=" /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/"
                                   oninvalid="this.setCustomValidity('Vui lòng nhập địa chỉ email')"
                                   oninput="setCustomValidity('')"/>
                        </div>
                    </div>
                </div>

And anyone have a working regex to check valid email? I found that regex on the Internet but it does not work correctly

@ctwheels because your top domain is over the expected amount of chars: \.[a-z]{2,4}$/. Try something reasonable like: .com, .net, etc — zer00ne
– zer00ne, Commented Oct 24, 2017 at 15:26
@zer00ne I know... I was showing the OP that my example is not permitted. They should not be using that regex to validate emails. This is not the correct way to do so. I believe it's perfectly reasonable to have a tld other than .com, .net etc. My workplace, for example, uses multiple domains including tlds .finance among others. Also, it doesn't accept non-english names. John.Dö[email protected] — ctwheels
– ctwheels, Commented Oct 24, 2017 at 15:28
When validating an email field, why not go with <input type="email" required />? (As opposed to type="text") Problem with setting an incorrect email regex pattern solved :o) — agrm
– agrm, Commented Oct 24, 2017 at 15:31
@ctwheels may bad, did not grok what's inferred. BTW it's .domains — zer00ne
– zer00ne, Commented Oct 24, 2017 at 15:32

agrm · Accepted Answer · 2017-10-24 16:01:22Z

0

Keep it simple :o) Unless you really need to go use the Constraint Validation API, as you are currently doing, I would go with regular Form Validation which has pretty good browser support.

Basically when you apply the required attribute on input elements they will be matched against a few conditions. One is the field cannot be left blank. A second is an optional pattern. In your case, you can specify type="email" and the browser will match the input for a valid email address. As far as I can read your request, the following should cover your needs:

<form action="">
  <input type="email" required>
  <input type="submit">
</form>

The risk of defining a custom pattern using regex is that you might end up testing for a faulty pattern. In your case, testing for [email protected] would fail even if it's a valid email address.

edited Oct 24, 2017 at 16:01

answered Oct 24, 2017 at 15:47

agrm

3,8924 gold badges29 silver badges36 bronze badges

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

2 Comments

user8255190 Over a year ago

using type="email" sometimes does not work correctly

agrm Over a year ago

In what way does it not work correctly? Does it wrongly pass/fail the validation?

Collectives™ on Stack Overflow

Using pattern and required attribute of input field html at the same time

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related