Check all elements in form with Javascript

Question

I know javascript in the beginning level, but I have a problem.

I have 7 input elements in a form and I want all of them to be filled. I came up with this idea but it looks disgusting.

Can someone help me how to check whether all form elements are filled or not?

function validateForm()
{
var x=document.forms["register"]["name"].value;
var y=document.forms["register"]["phone"].value;
var z=document.forms["register"]["compname"].value;
var q=document.forms["register"]["mail"].value;
var w=document.forms["register"]["compphone"].value;
var e=document.forms["register"]["adres"].value;
var r=document.forms["register"]["zip"].value;
if (x==null || x=="" || y==null || y=="" || z==null 
|| z=="" || q==null || q=="" ||  w==null || w=="" || e==null || e=="" 
|| r==null || r=="")
{
alert("Please fill all the inputs");
return false;
}
}
</script>

*Slightly* less **disgusting** - take advantage of the falsiness of "", and make your `if` statement: `if (!x || !y || !z || !q || !w || !e || !e)` — Scott Mermelstein, Jul 29 '13 at 20:28

score 14 · Accepted Answer · answered Jul 29 '13 at 20:31

14

This is the simple and dirty way.

A better way is to update a validation message that the fields are required.

function validateForm()
{
  var fields = ["name, phone", "compname", "mail", "compphone", "adres", "zip"]

  var i, l = fields.length;
  var fieldname;
  for (i = 0; i < l; i++) {
    fieldname = fields[i];
    if (document.forms["register"][fieldname].value === "") {
      alert(fieldname + " can not be empty");
      return false;
    }
  }
  return true;
}

answered Jul 29 '13 at 20:31

Jeremy J Starcher

23,369
6
54
74

1

Jeremy, does placeholder breaks this if check? I'm so noob on js – Falcon Jul 29 '13 at 20:41
1

I don't understand the question, sorry. – Jeremy J Starcher Jul 29 '13 at 20:43
Does this still count "empty"? – Falcon Jul 29 '13 at 20:52
Yes, it still counts as empty. The placeholder doesn't change the `value` of an input element, only how it displays. – Jeremy J Starcher Jul 29 '13 at 21:00

score 6 · Answer 2 · answered Jul 29 '13 at 20:40

With some simple vanilla JS, you can handle this in a lot more simplified way:

JavaScript

function validateForm(){
    var form = document.getElementById("register"), inputs = form.getElementsByTagName("input"), input = null, flag = true;
    for(var i = 0, len = inputs.length; i < len; i++) {
        input = inputs[i];
        if(!input.value) {
            flag = false;
            input.focus();
            alert("Please fill all the inputs");
            break;
        }
    }
    return(flag);
}

Then make sure you return the function within your form, either inline (bad practice):

<form name="register" id="register" method="post" action="path/to/handler.php" onsubmit="return validateForm();">

Or in a more unobtrusive way:

window.onload = function(){
    var form = document.getElementById("register");
    form.onsubmit = function(){
        var inputs = form.getElementsByTagName("input"), input = null, flag = true;
        for(var i = 0, len = inputs.length; i < len; i++) {
            input = inputs[i];
            if(!input.value) {
                flag = false;
                input.focus();
                alert("Please fill all the inputs");
                break;
            }
        }
        return(flag);
    };
};

score 0 · Answer 3 · edited Feb 04 '16 at 15:51

<html>

<head>
  <title> Event Program</title>
  <script>
  function validateForm() {
    var fields = ["name, phone", "compname", "mail", "compphone", "adres", "zip"]
    var i, l = fields.length;
    var fieldname;
    for(i = 0; i < l; i++) {
      fieldname = fields[i];
      if(document.forms["register"][fieldname].value === "") {
        alert(fieldname + " can not be empty");
        return false;
      }
    }
    return true;
  }

  var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];
  var fields = {
    "eventName": "Event Name",
    "eventDate": "Event Date",
    "eventPlace": "Event Place"
  }

  function Validate(oForm) {
    var arrInputs = oForm.getElementsByTagName("input");
    for(var i = 0; i < arrInputs.length; i++) {
      var oInput = arrInputs[i];
      if(oInput.type == "text" && oInput.value == "") {
        alert(fields[oInput.name] + " cannot be empty");
        return false;
      }
      if(oInput.type == "file") {
        var sFileName = oInput.value;
        if(sFileName.length > 0) {
          var blnValid = false;
          for(var j = 0; j < _validFileExtensions.length; j++) {
            var sCurExtension = _validFileExtensions[j];
            alert(sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase())
            if(sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
              blnValid = true;
              break;
            }
          }

          if(!blnValid) {
            alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
            return false;
          }
        }
      }
    }

    return true;
  }

  </script>

</head>

<body>
  <div align="center">
    <h3>Event Management</h3>
    <form onsubmit="return Validate(this);" id='eventForm' name='eventForm' method='POST' enctype='multipart/form-data' action='saveEvent.php'>
      <table>
        <tr>
          <td>Event Name</td>
          <td>
            <input type="text" name="eventName">
          </td>
        </tr>
        <tr>
          <td>Event Date</td>
          <td>
            <input type="text" name="eventDate" id='datepicker'>
          </td>
        </tr>
        <tr>
          <td>Event place</td>
          <td>
            <input type="text" name="eventPlace">
          </td>
        </tr>
        <tr>
          <td>Upload Image</td>
          <td>
            <input type="file" name="my file" />
            <br />
          </td>
        </tr>
        <tr>
          <td>About Events</td>
          <td>
            <textarea></textarea>
          </td>
        </tr>
        <tr>
          <td colspan=2 align=center>
            <input type="submit" value="Submit" />
            <input type="button" name="clear" value="Clear" />
          </td>
        </tr>
      </table>
    </form>
  </div>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
  $(function () {
    $("#datepicker").datepicker({
      dateFormat: "dd/mm/yy",
      changeMonth: true,
      changeYear: true
    }).datepicker("setDate", new Date());
  });

  </script>
</body>

</html>

score 0 · Answer 4 · answered Feb 13 '23 at 10:23

<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    document.getElementById('namecheck').innerHTML="Name must be filled out";
    return false;
  }
  else{
      document.getElementById('namecheck').innerHTML="";
  }
  
  let y = document.forms["myForm"]['age'].value;
  if (y == "") {
    document.getElementById('agecheck').innerHTML="Age must be filled out";
    return false;
  }
  else{
      document.getElementById('namecheck').innerHTML="";
  }
  
  let z = document.forms["myForm"]['phone'].value;
  if (z == "") {
    document.getElementById('phonecheck').innerHTML="Phone must be filled out";
    return false;
  }
  else{
      document.getElementById('phone').innerHTML="";
  }
  
  
}
</script>
</head>
<body>

<h2>JavaScript Validation</h2>

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
  
  Name: <input type="text" name="fname">
  <p id='namecheck' style="color:red"></p>
  
  Age: <input type="text" name="age">
  <p id='agecheck' style="color:red"></p>

  
  Phone: <input type="text" name="phone">
    <p id='phonecheck' style="color:red"></p>
  
  <input type="submit" value="Submit">
</form>

</body>
</html>

You can use this easy method to validate all fields of form.

score -2 · Answer 5 · answered Jul 30 '13 at 18:21

You could just do this:

//Declare variables
var 1, 2, 3, 4, 5, 6, 7;
1 = document.getElementById("Field Id");
2 = document.getElementById("Field Id");
3 = document.getElementById("Field Id");
4 = document.getElementById("Field Id");     //Define variable values
5 = document.getElementById("Field Id");
6 = document.getElementById("Field Id");
7 = document.getElementById("Field Id");

//Check if any of the fields are empty
If (1 == "" || 2 == "" || 3 == "" || 4 == "" || 5 == "" || 6 == "" || 7 == "") {
  alert("One or more fields are empty!");
  //Other code
}

I used this for my own form and it works fine while not taking up to much space or looking too "ugly". It works for all field elements and checks the value entered.

Check all elements in form with Javascript

5 Answers5

Linked