Javascript Validation to Only Allow Alphabets in Input Field with Example
Data is the most valuable item in the software industry which helps us to predict and provide analytics. So data must be validated from malformed characters then afterward data segregated. The segregation is repetitive tasks in software development.
In this post, we’ll learn to validate user input through regular expression in Javascript.
Table of Contents
- Automatically remove numbers during input
- Check if the string has numbers
- Check if the string has special characters
- Conclusion
Automatically remove numbers during input
Cases where we would like to remove numbers from string and allow users to enter information that does not contain a string.
Then follow the below example.
<label for="">Enter name</label>
<input type="text" id="name" value="" oninput="allow_alphabets(this)" >
<script>
function allow_alphabets(element){
let textInput = element.value;
textInput = textInput.replace(/[^A-Za-z ]*$/gm, "");
element.value = textInput;
}
</script>
Function allow_alphabets() takes input element as a parameter and we have created a variable textInput which
has the value of text input. In Javascript method replace(pattern, new_string) is available on all strings. We can
also use this method for a simple replace operation but in this case, we’ll use it for replacing using a regular expression.
So regular expression pattern in allow_alphabets() function is /[^A-Za-z ]*$/gm.
- Forward slash
/first and last is regular expression holder inside which we provide patter to search and replace. - Square brackets
[ ]acts as a container for matching single characters. - Top arrow
^the symbol is used for matching only those characters which are not in the string. This is basically a NOT operation on string. - Inside square brackets are the characters which we would like to exclude from the search and only find those which does not have these characters.
- Star
*is a quantifier that can search zero or more characters. - The dollar sign
$represents the end of the string.
Check if a string has numbers
For validating if a string contains a number follow the below example.
<label for="">Enter name</label>
<input type="text" id="name" value="" oninput="check_for_numbers(this)" >
<script>
function check_for_numbers(element){
let textInput = element.value;
let pattern = /[0-9]+/gm;
if(pattern.test(textInput)){
console.log("String contains Numbers.");
}else{
console.log("String doesnot contain Numbers.");
}
element.value = textInput;
}
</script>
The function check_for_numbers(element) checks if a number exists in a string through a pattern /[0-9]+/gm.
The method patter.test(textInput) returns true only if the string contains numbers which we have specified in regular expression pattern [0-9].
Check if the string has special characters
To stop users from adding special characters to input fields we’ll refer to the below example.
<label for="">Enter name</label>
<input type="text" id="name" value="" oninput="check_if_input_has_special_chars(this)" >
<script>
function check_if_input_has_special_chars(element){
let textInput = element.value;
let pattern = /[^a-zA-Z0-9 ]+$/gm;
if(pattern.test(textInput)){
console.log("String contains special characters.");
}
element.value = textInput;
}
</script>
pattern /[^a-zA-Z0-9 ]+$/gm searches for characters other than alphabets, numbers, and white spaces. If special characters are detected then it will display “String contains special characters.”.
Conclusion
So it’s time to say bye we have come to the end of our post on Javascript Validation to Only Allow Alphabets in Input Field with Example. If you have your best way of appending before and after element then do suggest us in the comment section below and if you like our content then please do share it.
Related Posts
- JavaScript Search and Highlight Words within String
- JavaScript Search within String using the search() and match() method
