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 will not be valid and therefore will show an error when clicking submit (Will not register the user).

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. will not be valid and therefore will show an error when clicking submit (Will not register the user).

• javascript
• php
• jquery
• html
• regex

• masked input jquery plugin for example... – Deep Commented Dec 25, 2015 at 22:11

3 Answers 3

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./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>

many solutions are available:

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/>