JavaScript Check For Null Or Empty String
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Anjali
In this tutorial we will show you the solution of JavaScript check for null or empty string, here we used built-in values in javascript (i.e) null, undefined and empty quotes.
Those are values compared with user input values so we can easily found out whether input field is empty or null then we have instruct user to fill correct input and can’t leave as empty input field so user can give correct input.
Step By Step Guide On JavaScript Check For Null Or Empty String :-
Here we defined two input tags for getting string input from user and submit button defined for submit user input value then defined one div tag with id ‘h’ for displaying some instruction for user on webpage.
In script we defined function fun(), this is appends with onclick attribute in submit button so it will called when user clicks on it.
Here we collecting user inputs by id ‘str’ then stored on variable ‘inpt’ and using if condition we checks whether user input is empty or not.
We appended respective defined program instruction message on webpage by innerHTML for user.
<!DOCTYPE html>
<html>
<head>
<title>CHECKING UNDEFINED/EMPTY/NULL</title>
</head>
<body>
<input id="str" type="text" placeholder="Enter a String">
<input onclick="fun()" type="submit" value="Submit">
<div id="h"></div>
<script>
function fun(){
var inpt=document.getElementById('str').value;
if(inpt == null || inpt==undefined || inpt==''){
document.getElementById('h').innerHTML="We can't leave as empty<br>";
}
else{
document.getElementById('h').innerHTML="Response received";
}
}
</script>
</body>
</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.
- 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.
- Here we defined two input tags for getting input string from user and submit button for verify user submissions when user clicks on submit button by function ‘fun()’.
- Div tag defined with id attribute ‘h’. In script we defined function fun(), here we collected user entered input and stored on variable ‘inpt’. Using if condition we checks whether entered input is ‘null, undefined or empty’.
- If condition true means displaying message to user for entered valid string otherwise displays user response received message.
- We appended respective verified message on div element ‘h’ and it will displayed on webpage.
- 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 check whether input is null or empty using javascript.
When we executes program on browser we can see the input box with submit button.
User needs to give input string and clicks on submit button then user input values checked using if condition.
If returns true means displays ‘We can't leave as empty’ message so user will not leave them as empty or null otherwise it displays message ‘Response received’ on webpage for user verification entered inputs are received message.
I hope this tutorial on JavaScript check for null or empty string helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
