How to validate an input type="text" element to only accept certain content?

Question

I have a text input field:

<input type="text" name="email" size="25" placeholder="Email Address" required/>

Is there a way to format the input field to only allow certain text to be valid?

For example: In that particular text field, the user must input an email address which ends in @hotmail.co.uk . Any other email domains such as @yahoo.com will not be valid and therefore will show an error when clicking submit (Will not register the user).

Answer 1

You can use the HTML5 pattern attribute to validate whether the string ends with @hotmail.co.uk .

In this case you can use the following regular expression:

^.*@hotmail\.co\.uk$

 <form> <input type="text" name="email" pattern="^.*@hotmail\\.co\\.uk$" size="25" placeholder="Email Address" required/> <input type="submit" /> </form> 

Alternatively, you could also just attach an input event listener to the element and check manually. This is just a basic example, feel free to customize to your needs. I would still suggest validating that the value is a valid email address by using the regex from this question .

 $('input[name="email"]').on('input', function(e) { var isValid = this.value.match(/^.*@hotmail\\.co\\.uk$/) !== null; $(this).toggleClass('isValid', isValid); }); 

 .isValid { background: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <input type="text" name="email" size="25" placeholder="Email Address" required/> <input type="submit" /> </form> 

Answer 2

Extended answer using the "pattern" attribute (from Josh Crozier):

After the user changed the value of the input you can check it for a valid input:

In addition you could test the input while the user is typing the value and highlight the border:

 function check(el) { if (new RegExp(el.pattern).test(el.value) == false) { alert("Bad Input") } } function test(el) { if (new RegExp(el.pattern).test(el.value) == false) { el.classList.add("bad") } else { el.classList.remove("bad") } } 

 .bad { border-color: red; } 

 <input pattern="^.*@hotmail\\.co\\.uk$" onchange="check(this)" oninput="test(this)" type="text" name="email" size="25" placeholder="Email Address" required/> 

Answer 3

many solutions are available:

validate form with javascript.

use 2 inputs: a text input for the username and a select options or radio buttons for "@site.com"

pattern attribute on input