javascript - 如何在焦点事件中动态添加元素下方的跨度？

Question

我正在编写自己的验证代码，但我不知道如何在输入的值长度为 0 时在输入下方动态添加带有消息的跨度。我知道我可以在其下方放置一个跨度每个输入元素并在需要之前不显示任何内容，但这将违背动态创建跨度的目的，并且可能需要一段时间才能取决于其使用方式。

我将如何实现这一目标？

<style scoped>
    #userDetails {
        margin-top:60px;
    }
</style>

<div id="userDetails" class="form-horizontal">
    <div class="row">
        <div class="form-group">
            <label class="col-md-2 control-label" for="txtFirstName">First Name</label>
            <div class="col-md-6 col-lg-6">
                <input id="txtFirstName" is-required class="form-control input-sm" />
            </div>
        </div>
    </div>

    <div class="row">
        <div class="form-group">
            <label class="col-md-2 control-label" for="txtLastName">Last Name</label>
            <div class="col-md-6 col-lg-6">
                <input id="txtLastName" is-required class="form-control input-sm" />
            </div>
        </div>
    </div>

    <div class="row">
        <div class="form-group">
            <label class="col-md-2 control-label" for="txtEmail">E-mail</label>
            <div class="col-md-6 col-lg-6">
                <input id="txtEmail" is-required class="form-control input-sm" />
            </div>
        </div>
    </div>

</div>

function ValidationCheck() {
  let isRequired = document.querySelectorAll('[is-required]');
  isRequired.forEach(function(element) {
    element.addEventListener('focusout', (e) => {
      if (element.value.length == 0) {
        element.style.border = "1px solid red";
        if (element.classList.contains("clear")) {
          element.classList.remove("clear");
        }
      } else {
        element.style.border = "1px solid green";
        element.classList.add("clear");
      }
    });
    element.addEventListener('keyup', (e) => {
      element.style.border = "1px solid green";
    });
  });
}

$(document).ready(function() {
  ValidationCheck();
});

function ValidationCheck() {
  let isRequired = document.querySelectorAll('[is-required]');
  isRequired.forEach(function(element) {
    element.addEventListener('focusout', (e) => {
      if (element.value.length == 0) {
        element.style.border = "1px solid red";
        if (element.classList.contains("clear")) {
          element.classList.remove("clear");
        }
      } else {
        element.style.border = "1px solid green";
        element.classList.add("clear");
      }
    });
    element.addEventListener('keyup', (e) => {
      element.style.border = "1px solid green";
    });
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<style scoped>
  #userDetails {
    margin-top: 60px;
  }
</style>

<div class="container">
  <div id="userDetails" class="form-horizontal">
    <div class="row">
      <div class="form-group">
        <label class="col-sm-2 col-md-2 control-label" for="txtFirstName">First Name</label>
        <div class="col-sm-6 col-md-6 col-lg-6">
          <input id="txtFirstName" is-required class="form-control input-sm" />
        </div>
      </div>
    </div>

    <div class="row">
      <div class="form-group">
        <label class="col-sm-2 col-md-2 control-label" for="txtLastName">Last Name</label>
        <div class="col-sm-6 col-md-6 col-lg-6">
          <input id="txtLastName" is-required class="form-control input-sm" />
        </div>
      </div>
    </div>

    <div class="row">
      <div class="form-group">
        <label class="col-sm-2 col-md-2 control-label" for="txtEmail">E-mail</label>
        <div class="col-sm-6 col-md-6 col-lg-6">
          <input id="txtEmail" is-required class="form-control input-sm" />
        </div>
      </div>
    </div>

  </div>
</div>

Answer 1

这是添加带有一些文本的跨度的示例，请根据您的需要进行编辑/更新/更改。

$(document).ready(function() {
  ValidationCheck();
});

function ValidationCheck() {
  let isRequired = document.querySelectorAll('[is-required]');
  isRequired.forEach(function(element) {
    element.addEventListener('focusout', (e) => {
      if (element.value.length == 0) {
        element.style.border = "1px solid red";
        
var parentDiv = element.parentNode;
var para = document.createElement("span");
var node = document.createTextNode("This is new.");
para.appendChild(node);
parentDiv.appendChild(para);

        if (element.classList.contains("clear")) {
          element.classList.remove("clear");

        }
      } else {
        element.style.border = "1px solid green";
        element.classList.add("clear");
      }
    });
    element.addEventListener('keyup', (e) => {
      element.style.border = "1px solid green";
    });
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<style scoped>
  #userDetails {
    margin-top: 60px;
  }
</style>

<div class="container">
  <div id="userDetails" class="form-horizontal">
    <div class="row">
      <div class="form-group">
        <label class="col-sm-2 col-md-2 control-label" for="txtFirstName">First Name</label>
        <div class="col-sm-6 col-md-6 col-lg-6">
          <input id="txtFirstName" is-required class="form-control input-sm" />
        </div>
      </div>
    </div>

    <div class="row">
      <div class="form-group">
        <label class="col-sm-2 col-md-2 control-label" for="txtLastName">Last Name</label>
        <div class="col-sm-6 col-md-6 col-lg-6">
          <input id="txtLastName" is-required class="form-control input-sm" />
        </div>
      </div>
    </div>

    <div class="row">
      <div class="form-group">
        <label class="col-sm-2 col-md-2 control-label" for="txtEmail">E-mail</label>
        <div class="col-sm-6 col-md-6 col-lg-6">
          <input id="txtEmail" is-required class="form-control input-sm" />
        </div>
      </div>
    </div>

  </div>
</div>