In this article we will show you the solution of jQuery validate number, here we needs to use val(), isNumeric() or text() methods for achieve the result. The val() method always used to collects user input value from form html element, specifically isNumeric() method have characteristic to verify whether input is number or not.
The text() method helps us to appends result on webpage by using html element.
Step By Step Guide On jQuery Validate Number :-
Here we defined at html block, input element defined with class attribute for collect users input, p element specified for appends result on it and button ‘Check’.
In script block we defined ready() method which is automatically starts loading code of within this function when this program opened on browser and within that we waiting for click event occurrence which is appended with button.
Firstly we collected user input and stored on variable ‘res’ and in if condition we checks user input type by using isNumeric() method. At last we appending message on p element based on user input.
<!DOCTYPE html>
<html>
<head>
<title>Number Validation</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var res=$(".num").val();
if($.isNumeric(res))
$("p").text("Valid input...");
else
$("p").text("Not valid input...");
})
});
</script>
<body>
<input type="text" class="num" placeholder="Enter Numbers">
<p></p>
<button>Check</button>
</body>
</head>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Here we imported open source jquery library support file which is needed for coding using jquery in program.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- In script we defined ready() method within that we defined click() method which is appends with button by using tag name ‘button’ for generates click event when user clicks on ‘Check’ button.
- Within function variable ‘res’ used for stores users input value by specifying input element’s class name ‘num’ with val() method.
- At if condition using isNumeric() method with fetched result variable ‘res’ passed as a parameter to verify input. It returns success message if user input is numeric type otherwise it throws error message.
- Using text() method we defining notification message and which is appended on p element by specifying tag name ‘p’ with it.
- In html block we defined input element with class and placeholder attributes with respective values ‘num, Enter Numbers’, empty p element and button ‘Check’.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to validate number input type in jquery.
Before execution of program we needs to confirm internet connection because then only that jquery file will supports defined jquery codes without error.
When we executes program on browser we can see text box and button ‘Check’ now user needs to fill text box then clicks on button.
Based on user input notification message will shows on webpage to provide confirmation for users.
I hope this article on jQuery validate number helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
