Question

它只刷新页面当我没有填写值我希望文本出现说请输入值，我教会发生但反而只是刷新我不知道该怎么办请帮助YY

PS：这是我第一次使用这个论坛而且我是相当新的做到这一点，但我想更多参与所以任何建议将不胜感激或如果我做错了，请告诉Thx：3。

function required()
{
var empt = document.forms["form1"]["name"]["Email"]["country"].value;
if (empt == "")
{
alert("Please fill out all the boxes");
return false;
}
else 
{
alert('Code has accepted : you can try another');
return true; 
}
}

<!DOCTYPE html>
<html>
<head>
<title>Contact us!</title>
 <center><img id="banner" src="contact.png" alt="Banner Image"/></center>
 <link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<style>
/*Header is unique cause its a banner header which uses a image as a banner i found this on stock overflow comment section it has been edited to fit my needs*/
 head{ background: url("contact.png") repeat;}
#banner {
  position:center ;
  top: 0px;
  left: 0px;
  right: 0px;
  width: 40%;
  height: 300px;
  z-index: -1;
}

.footer {
    background-color: #f1f1f1;
    padding: 10px;
    text-align: center;






textarea {
    width: 100%;
    height: 140px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color:#C99CDC;
    font-size: 16px;
    resize: none;
}
</style>
<body>


  <div class="topnav">
  <a href="Home.html">Home page</a>
  <a href="SEARCH.html">Search page.</a>
  <a href="Merchendise.html">Merchendise</a>
</div>
<br>
<form name="form1" action="#" onsubmit="required()">
  Name:
  <input type="text" name="name">
  
  
  Email:
  <input type="text" name="Email">
  
   Location
   <select id="country" name="country">
	 <option value="Null"></option>
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
	  <option value="indoasia">Indoasia</option>
	  <option value="japan">japan</option>
	  </select>
	  <br>
	  <br>
	  <textarea rows="9" cols="125"></textarea>
	  <br>
 <input type="submit" value="Submit">
	</form>
 </div>
<div class="footer">

<address>
</a>.<br> 
<br>
deakin.com<br><br><br>
</address>
<p>  ©
Deakin College.</p>
</div>

<script src="contact.js"></script>





</body>
</html>

Answer 1

可能有很多重复，但我现在无法找到。

您需要遍历表单中的控件并检查其值，

var empt = document.forms["form1"]["name"]["Email"]["country"].value;

没有做你的想法（可能连接所有的值？）。要检查所有值，可以将控件转换为数组，然后使用 every 检查它们是否都满足特定条件，例如

＆＃13;

// Pass reference to form from listener
function required(form) {

  // Loop over controls in form, checking that they all meet a condition
  return Array.from(form.elements).every(function (control) {

    // Ingore submit button (may want to ignore others)
    if (control.type != 'submit') {

      // If value is empty, return false
      if (control.value == '') {
        return false;
      }
    }

    // Otherwise, return true
    return true;
  });
}

＆＃13;

<!-- Pass reference to form in call using 'this' -------^^^^ -->
<form name="form1" action="#" onsubmit="return required(this)">
  Name:<input type="text" name="name"><br>
  Email:<input type="text" name="Email"><br>
  Location: <select id="country" name="country">
    <option value="Null"></option>
    <option value="australia">Australia</option>
    <option value="canada">Canada</option>
    <option value="usa">USA</option>
    <option value="indoasia">Indoasia</option>
    <option value="japan">Japan</option>
  </select><br>
  <textarea rows="9" cols="125"></textarea><br>
  <input type="submit" value="Submit">
</form>

＆＃13;

Answer 2

只需将required属性添加到控件中的必需属性，浏览器就会阻止提交，除非填写了字段。

以下是修复代码的一种方法，但RobG的解决方案更好，因为您可以在不修改js的情况下添加更多字段。

另外，作为变量名称的empt不是很有意义......

function required()
{

var empty = document.forms["form1"]["name"].value && document.forms["form1"]["Email"].value && document.forms["form1"]["country"].value;

if ( ! empty )
{
alert("Please fill out all the boxes");
return false;
}
else 
{
alert('Code has accepted : you can try another');
return true; 
}
}

<!DOCTYPE html>

<form name="form1" action="#" onsubmit="required(); return false;">
  Name:
  <input type="text" name="name">
  
  
  Email:
  <input type="text" name="Email">
  
   Location
   <select id="country" name="country">
	 <option value=""></option>
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
	  <option value="indoasia">Indoasia</option>
	  <option value="japan">japan</option>
	  </select>
	  <br>
	  <br>
	  <textarea rows="9" cols="125"></textarea>
	  <br>
 <input type="submit" value="Submit">
	</form>

表格 - 检查非空场

2 个答案: