使用Javascript检查表单中的所有元素

ahy6op9u 于 2023-02-15 发布在 Java

关注(0)|答案(5)|浏览(128)

我知道javascript在开始的水平，但我有一个问题。
我有7在一个表单输入元素，我想他们都被填充。我想出了这个主意，但它看起来恶心 *。
有人能告诉我如何检查是否所有表单元素都已填写？**

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>

JavaScript

来源：https://stackoverflow.com/questions/17933509/check-all-elements-in-form-with-javascript

5条答案

按热度按时间

w6mmgewl1#

这是简单而肮脏的方式。
一个更好的方法是更新验证消息，说明这些字段是必需的。

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）举报 2023-02-15

a11xaf1n2#

使用一些简单的普通JS，你可以用一种更简单的方式来处理这个问题：
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);
}

然后确保在表单中return该函数，或者内联（不好的做法）：

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

或者以一种更不引人注目的方式：

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）举报 2023-02-15

xzv2uavs3#

<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）举报 2023-02-15

cl25kdpy4#

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

您可以使用这个简单的方法来验证表单的所有字段。

赞(0）回复(0）举报 2023-02-15

fcy6dtqo5#

你可以这样做：

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

我在我自己的表单中使用了这个，它工作得很好，同时不会占用太多空间或看起来太“丑”。它适用于所有字段元素，并检查输入的值。

赞(0）回复(0）举报 2023-02-15

我来回答

使用Javascript检查表单中的所有元素

5条答案

相关问题

热门标签

最新问答