代码之家 › 专栏 › 技术社区 › Chris

如何在focusout事件的元素下面动态添加一个span?

javascript

Chris · 技术社区 · 7 年前

我正在编写自己的验证代码,但遇到了这样一个问题:当输入的值长度为0时,我不知道如何在输入下面动态添加一个带有消息的span。我知道我可以在每个输入元素下面放置一个span,并在需要时给它们一个无显示,但是这样做会破坏动态创建跨距的目的,并且可能需要一段时间才能完成,这取决于它的使用方式。

我该怎么做呢?

<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 回复 | 直到 7 年前

Danny Fardy Jhonston Bermúdez 7 年前

您可以创建 span 标记方式: Document.createElement()

Node.textContent 将文本设置到 跨度

然后,使用 Node.appendChild()

基本上,您需要这段代码:

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 ,可以删除添加的 跨度

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>

Nezir 7 年前

这是一个添加span的示例,其中包含一些文本,请根据您的需要进行编辑/更新/更改。

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

ganjim 7 年前

您可以为每个字段设置一个空白范围,然后更改 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);
}