Learn how to validate the dynamic input range validations for input type "text, number, & text-area" using JS along with test cases with an alert message.
In this blog, you are going to learn how to create a form with the customized restriction values of form input. So guys, get ready to grab the required code.
For input type the text
Initially, we will start with the most commonly used type of form input field and that is text. Here is the required HTML for the form input type text.
HTML
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css" />
<title>Notifies user, when given input range limit exceeds</title>
</head>
<body>
<div class="wrapper">
<h1>Alerts user when exceeds the input range</h1>
<p>
User will be notified when he gives more than the limit of given input
and the input type may be either text, number or the text with in the
text area
</p>
<form action="#">
<div class="input">
<label for="name">First Name</label>
<input
type="text"
onKeyDown="textLimit(this,10);"
onKeyUp="textLimit(this,10);"
/>
</div>
<small>Please provide your input less than 10 characters</small>
</form>
</div>
<script src="./script.js"></script>
</body>
</html>Let us add a few colors to our form to make it more attractive. Here is the required CSS.
CSS
style.css
body {
background: #8cdafae0;
}
.wrapper {
max-width: 50%;
margin: 50px auto;
padding: 20px;
background: #fff;
border-radius: 7px;
}
#textLimit {
padding: 5px;
border: 1px solid #bab9b9;
border-radius: 5px;
margin: 0 5px;
}
.input {
margin: 8px 0 0;
}
#textLimit:focus {
outline: none;
}After applying CSS, here is the result.
JS
Now we will go for the actual functionality, you can use the below code to restrict the input characters for any input field. In the JS file, we are just writing the function and when you observe the HTML file, there we are calling the function and passing the argument values i.e., the required number of characters that you need to limit.
script.js
function textLimit(inputType, inputValue) {
if (inputType.value.length > inputValue) {
inputType.value = inputType.value.substring(0, inputValue);
alert("you have crosed the given limit of characters");
}
}Let us conform our functionality with different input values, here is the screenshot for your reference.
In the HTML file, we are calling the function and given the character limit as 10, so the input takes only 10 characters. If we exceed the limit then give the alert message.
For input type number
Now, let us check for the number input type. We don’t need any JS to restrict the number range. We have some input attributes that do the job for us. Here is the required HTML code to achieve the goal.
HTML
<div>
<label for="experience">Experience</label>
<input type="number" id="quantity" name="quantity" min="2" max="4" />
<input class="submit" type="submit" />
</div>
<small>We need only 2 to 4 years of experienced people</small>CSS
Let’s do some CSS for a better look and feel purpose.
.submit {
background: #419dec;
border: 0;
color: #fff;
font-weight: bolder;
padding: 8px 46px;
display: block;
margin: 15px 0 4px;
letter-spacing: 1px;
border-radius: 7px;
}
#quantity {
padding: 1px 5px 0 16px;
}
We are limiting the range of numbers from 2 to 4.
Test:1 When the input range is below 2
Test:2 When the input range exceeds 4
Test:3 When the input range is in between the given range
The form will take the input and submits, you can check the submitted value in the top url.
For input type textarea
We have another input field to get the long text from the user. For example, if the user needs to comment, or enter their address we need this textarea input field. If you want to restrict the number of characters in this field, we can do it the same JS code that we did for For input-type text. The only thing we need to do is just a minor change in your HTML files and that is given below.
HTML
<textarea name="comments" onKeyDown="textLimit(this,30);" onKeyUp="textLimit(this,30);"></textarea>
<input class="submit" type="submit" />
<small>Allowed number of characters for this comments is only 30</small>JS code is already given in the initial step.
You can get all the code on my git page https://kosarajunavya.github.io/userinput/index.html
Conclusion:
Hope you got the required information for your requirement. Let me know if you need anything else other than given in the comment section, will follow up soon.
21 likes
Add to read list
Comments