使文本显示在提交框下方，提醒用户他们尚未填写框

我学习HTML和JavaScript大约一周了，我想知道如何让文本出现在名字和姓氏的输入框下方，告诉用户他们在留空并提交时将其留空。

<!DOCTYPE html>
<html>
<head>
<script language="JavaScript">
    function showInput() {
        document.getElementById('displayname').innerHTML = 
                    document.getElementById("fname").value + " " + document.getElementById("lname").value + " visited this on " + document.getElementById("date").value + " and said '" + document.getElementById("com") + "'";
    }   
</script>
<title>Great Pyramid of Giza</title>
</head>
<body>
<h2>Leave A Review!</h2>
<p>Have you been to this wonder of the world? If so, leave a review.</p>
<form>
  First Name:<br>
  <input type = "text" name="firstname" id="fname"><br>
  Last Name:<br>
  <input type = "text" name="lastname" id="lname"><br>
  Email Address:<br>
  <input type = "text" name="email"><br>
  Date of Visit:<br>
  <input type = "text" name="date" id="date"><br>
  Comment:<br>
  <input type = "text" name="comment" size="70" id="com"><br>
</form> 
<input type = "submit" value="Submit" onclick="showInput();">
<h2>Comments:</h2>
<p><span id='displayname'></span></p>

</body>
</html>

我为您创建了一个片段笔，修改了一些 javascript，并添加了错误消息。有很多方法可以实现这一点，但简而言之，我所做的是在每个输入下添加一个元素，您希望其初始display值为 none 的错误。提交时，我检查名字或姓氏值是否为空字符串，如果是，请将错误范围设置为 display: block 。在这里查看：

<html>
<head>
<script language="JavaScript">
    function showInput() {
      // Create references to DOM node text values, short circuit comment if not defined
      var comment = document.getElementById("date").value;
      var first = document.getElementById("fname").value;
      var last = document.getElementById("lname").value;
      var dateOfVisit = document.getElementById("date").value;
      var firstError = document.getElementById('firstNameError');
      var lastError = document.getElementById('lastNameError');
      // Grab reference to span element to output string
      var displayEl = document.getElementById('displayname');
      
      // Check falsiness of inputs
      // If falsey -> display error, else hide error
      if (!first) {
        firstError.setAttribute('style', 'display: block; color: red');
      } else {
        firstError.setAttribute('style', 'display: none;');
      }
      if (!last) {
        lastError.setAttribute('style', 'display: block; color: red');
      } else {
        lastError.setAttribute('style', 'display: none;');
      }
      // Set output string
      displayEl.innerHTML = 
        first + " " + last + " visited this on " + dateOfVisit + " and said '" + comment || 'not a thing...' + "'";
    }   
</script>
<title>Great Pyramid of Giza</title>
</head>
<body>
<h2>Leave A Review!</h2>
<p>Have you been to this wonder of the world? If so, leave a review.</p>
<form>
  First Name:<br>
  <input type = "text" name="firstname" id="fname"><br>
  <span style="display: none;" id="firstNameError">First name is required!</span>
  Last Name:<br>
  <input type = "text" name="lastname" id="lname"><br>
  <span style="display: none;" id="lastNameError">Last name is required!</span>
  Email Address:<br>
  <input type = "text" name="email"><br>
  Date of Visit:<br>
  <input type = "text" name="date" id="date"><br>
  Comment:<br>
  <input type = "text" name="comment" size="70" id="com"><br>
</form> 
<input type = "submit" value="Submit" onclick="showInput();">
<h2>Comments:</h2>
<p><span id='displayname'></span></p>
</body>
</html>

您需要创建一个空白的 HTML 元素来包含错误消息，然后在满足条件时使用 JavaScript 填充它或使其可见(该字段留空(。

.HTML：

  First Name:<br>
  <div><input type="text" name="firstname" id="fname"></div>
  <div id="firstnameError"></div><br>
  Last Name:<br>
  <div><input type="text" name="lastname" id="lname"></div>
  <div id="lastnameError"></div><br>

JavaScript：

function showInput() {
    var firstName = document.getElementById('fname').value;
    var lastName = document.getElementById('lname').value;
    if (!firstName) {
        document.getElementById('firstnameError').innerHTML = 'First Name is blank!';
    }
    if (!lastName) {
        document.getElementById('lastnameError').innerHTML = 'Last Name is blank!';
    }
}

相关内容

最新更新

热门标签：