Check All Elements In Form With Javascript

October 26, 2023 Post a Comment

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 disgus

Solution 1:

This is the simple and dirty way.

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

functionvalidateForm()
{
  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");
      returnfalse;
    }
  }
  returntrue;
}

Solution 2:

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

JavaScript

functionvalidateForm(){
    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);
    };
};

Solution 3:

<html><head><title> Event Program</title><script>functionvalidateForm() {
    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");
        returnfalse;
      }
    }
    returntrue;
  }

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

  functionValidate(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");
        returnfalse;
      }
      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(", "));
            returnfalse;
          }
        }
      }
    }

    returntrue;
  }

  </script></head><body><divalign="center"><h3>Event Management</h3><formonsubmit="return Validate(this);"id='eventForm'name='eventForm'method='POST'enctype='multipart/form-data'action='saveEvent.php'><table><tr><td>Event Name</td><td><inputtype="text"name="eventName"></td></tr><tr><td>Event Date</td><td><inputtype="text"name="eventDate"id='datepicker'></td></tr><tr><td>Event place</td><td><inputtype="text"name="eventPlace"></td></tr><tr><td>Upload Image</td><td><inputtype="file"name="my file" /><br /></td></tr><tr><td>About Events</td><td><textarea></textarea></td></tr><tr><tdcolspan=2align=center><inputtype="submit"value="Submit" /><inputtype="button"name="clear"value="Clear" /></td></tr></table></form></div><linkrel="stylesheet"href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"><scriptsrc="//code.jquery.com/jquery-1.10.2.js"></script><scriptsrc="//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", newDate());
  });

  </script></body></html>

Solution 4:

You could just do this:

//Declare variablesvar1, 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 values5 = document.getElementById("Field Id");
6 = document.getElementById("Field Id");
7 = document.getElementById("Field Id");

//Check if any of the fields are emptyIf (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.

Html5 News

Check All Elements In Form With Javascript

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Post a Comment for "Check All Elements In Form With Javascript"