How do I test if a field is empty html-CodePudding

I need to find a way to tell if a field is empty, using javascript or html, here's the code:

    </form>
<script>
function setAction(form) {
  alert(form.name);
  return false;
}
</script>

CodePudding user response：

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

CodePudding user response：

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>

CodePudding user response：

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 onl oad 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>