Check all elements in form with Javascript

前端未结

关注

 4  1035

庸人自扰

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 t

相关标签:

4条回答

别跟我提以往

2021-02-04 20:50

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;
}

0 讨论(0)

礼貌的吻别

2021-02-04 21:07

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);
    };
};

0 讨论(0)

天涯浪人

2021-02-04 21:10

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

0 讨论(0)

伪装坚强ぢ

2021-02-04 21:13

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.

0 讨论(0)