使用Javascript檢查表單中的所有元素

我知道開始級別的JavaScript，但我遇到了問題。使用Javascript檢查表單中的所有元素

我有在表單中輸入元素，我希望所有元素都被填充。我想出了這個主意，但它看起來噁心。

有人可以幫助我如何檢查是否所有表單元素都被填充？

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>

來源

2013-07-29 Falcon

jQuery解決方案能爲您工作嗎？ –

使用一個循環多次執行相同的操作... – dandavis

您可以使用標記輸入循環 – Sergio

這是簡單和骯髒的方式。

更好的方法是更新需要字段的驗證消息。

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

來源

2013-07-29 20:31:36

傑里米，佔位符是否打破這個檢查？我很喜歡js – Falcon

我不明白這個問題，對不起。 –

這還算「空」嗎？ – Falcon

通過一些簡單的香草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); 
    }; 
};

來源

2013-07-29 20:40:13 faino

你可能只是這樣做：

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

我用這對我自己的形式，雖然不是最多服用多少空間或看太「醜陋」，它工作正常。它適用於所有字段元素並檢查輸入的值。

來源

2013-07-30 18:21:35 Time

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

來源

2015-06-28 10:09:04

請解釋你的答案 – VladL

使用Javascript檢查表單中的所有元素

回答

相關問題