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

时间：2018-10-06 18:55:27

标签： javascript

我正在编写自己的验证代码，但遇到不知道如何在值长度为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>

3 个答案:

答案 0 :(得分：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>

答案 1 :(得分：1)

第一种方法

您可以为每个字段保留一个空白，然后将element.html的值更改为要显示的错误消息，然后删除display: none;

第二种方法

您还可以使用document.createElement()方法来创建元素并将其插入到想要的位置 我创建了一个包装函数，在这种情况下可能会为您提供帮助：

function addErrorSpan (afterId, errorMessage) { 
    // create a new span element after the element with "afterId" id with error message "errorMessage"  
    var newSpan = document.createElement("span"); 
    var newContent = document.createTextNode(errorMessage);
    newSpan.appendChild(newContent);  

    var afterElement = document.getElementById(afterId); 
    document.afterElement.parentNode.insertBefore(newElement, afterElement.nextSibling);
}

答案 2 :(得分：0)

您可以使用以下方法创建span标签：Document.createElement()

此外，您可以使用Node.textContent将文本设置到span标记中。

然后，通过使用Node.appendChild()，可以将创建的新span标签添加到适当的node元素中。

基本上，您需要这段代码：

span = document.createElement("span");
span.style.color = "red";
span.textContent = "Invalid!";

// Just add a span tag when is necessary.
if (!element.parentNode.children[1]) {
  element.parentNode.appendChild(span); // If "element" is your input control, with parentNode finds its parent node element.
}

更新：

验证为OK时，可以使用以下代码删除添加的span：

if (element.parentNode.children[1]) {
  element.parentNode.children[1].remove();
}


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

function ValidationCheck() {
  let isRequired = document.querySelectorAll('[is-required]'),
    span;
  isRequired.forEach(function(element) {
    element.addEventListener('focusout', (e) => {
      if (element.value.length == 0) {
        element.style.border = "1px solid red";

        span = document.createElement("span");
        span.style.color = "red";
        span.textContent = "Invalid!";

        // Just add a span tag when is necessary.
        if (!element.parentNode.children[1]) {
          element.parentNode.appendChild(span);
        }

        if (element.classList.contains("clear")) {
          element.classList.remove("clear");
        }
      } else {
        element.style.border = "1px solid green";
        element.classList.add("clear");
        if (element.parentNode.children[1]) {
          element.parentNode.children[1].remove();
        }
      }
    });
    element.addEventListener('keyup', (e) => {
      element.style.border = "1px solid green";
      if (element.parentNode.children[1]) {
        element.parentNode.children[1].remove();
      }
    });
  });
}
<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>

相关问题
最新问题