How do I test if a field is empty html
Question
I need to find a way to tell if a field is empty, using javascript or html, here's the code:
<script>
function setAction(form) {
alert(form.name);
return false;
}
</script>
3 answers
solution1
1 2022-05-27 15:25:02
A Snippet like this should do the trick, putting inputx as the selected field your testing for
if (inputtx.value.length == 0){
alert("empty form");
return false;
} else
alert("filled form");
return true;
}
The alerts are just to let you know if its working, you could also use a
console.log("empty/filled form");
and then check in the web browser console
solution2
0 2022-05-27 16:25:33
Your code snippet is so generic, but is not a problem. For solving this task you will need to get HTML input object in JavaScript and extract it's value length to compare if is greater than zero. Notice that you are not able to get HTML object if the window is not fully loaded this is why you will need to deal with DOM events.
Creating the form:
<form id="myForm" onSubmit="return false;">
<label for="name">First name:</label><br>
<input type="text" id="nameField" name="name" value="Your Name"><br>
</form>
In this example I selected enter key and will be used to check if the form field is empty or not, this is why onSubmit="return false;" event was bound to return false, avoiding reloading the page on form submit with enter key press.
Creating script part
window.onload = function windowLoaded(windowEvent)
{
const myInputFieldHtmlObject = document.querySelector("#nameField");
myInputFieldHtmlObject.onkeypress = function(event)
{
if(event.which == 13)
{
if(myInputFieldHtmlObject.value.length == 0)
{
alert("Fill please the name field.");
}
}
}
myInputFieldHtmlObject.onfocus = function(event)
{
myInputFieldHtmlObject.value = "";
}
}
Bind onload event to the window object. This guarantee that all HTML objects in the page are loaded before accessing it with document.querySelector("#nameField") . Bind on key press and on focus events to your each individual fields in the form what need checks. On key press will check after you type the name and press Enter key (value 13) if number of characters are at least 1, otherwise will pop an error. On focus event will just clear the text input default value to nothing.
Complete example:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>My Form Test</title>
<style>
html, body
{
width: 100%;
height: 100%;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
}
</style>
<script>
window.onload = function windowLoaded(windowEvent)
{
const myInputFieldHtmlObject = document.querySelector("#nameField");
myInputFieldHtmlObject.onkeypress = function(event)
{
if(event.which == 13)
{
if(myInputFieldHtmlObject.value.length == 0)
{
alert("Fill please the name field.");
}
}
}
myInputFieldHtmlObject.onfocus = function(event)
{
myInputFieldHtmlObject.value = "";
}
myInputFieldHtmlObject.onSubmit = function(event)
{
return false;
}
}
</script>
</head>
<body>
<h2>My Form</h2>
<form id="myForm" onSubmit="return false;">
<label for="name">First name:</label><br>
<input type="text" id="nameField" name="name" value="Your Name"><br>
</form>
</body>
</html>
solution3
-1 2022-05-27 15:38:40
If you have a single form and you want the index numbers of empty fields:
function emptyFields(form) { return [...document.forms[form]].flatMap((field, index) => field.value.length < 1 ? [index] : []); } console.log(emptyFields('data'));
<form name='data'> <input> <input value='not empty'> <input> <input> <input value='not empty'> <input> </form>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.