Question

（我已经在JSFiddle中重新创建了它，请记住它没有任何美学视觉效果，它只是显示的基础，而<script>也在HTML代码的下方）

我已经从裸骨写了this small function，其背后的基本原则是它应该重新创建一个表单（通过在函数中添加HTML），这样就可以得到4个正确的复选标记（绿色的）右边角，当它们全部填满时，以及4个错误检查标记（红色标记），当它们并非全部填写时，或者当用户点击发送时根本没有填充。

但是现在例如当用户填写其中3个而不是其中之一时，它将在所有这些上显示红色复选标记，我怎样才能使它看起来只会在其中显示红色标记没有填写它，即使他填写了一个没有填充它的那个，它只有在用户刷新页面时才会“更新”，我该如何解决？

另外，我如何提供实时更新，例如，当用户键入例如他们的名字并移动到下一个文本字段时，它应该已经显示了名称的绿色标记，如何我解决了吗？

感谢您提前付出的所有努力和帮助。（我知道这个表格永远不会有效，因为我需要PHP。）

Answer 1

我认为你正在寻找这个。请参阅以下代码段

＆＃13;

jQuery('.notchecked').on('input', function() {
  nietLeeg($(this));
});

function validateEmail(sEmail) {
  var reEmail = /^(?:[\w\!\#\$\%\&\'\*\+\-\/\=\?\^\`\{\|\}\~]+\.)*[\w\!\#\$\%\&\'\*\+\-\/\=\?\^\`\{\|\}\~]+@(?:(?:(?:[a-zA-Z0-9](?:[a-zA-Z0-9\-](?!\.)){0,61}[a-zA-Z0-9]?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9\-](?!$)){0,61}[a-zA-Z0-9]?)|(?:\[(?:(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\.){3}(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\]))$/;

  if (!sEmail.match(reEmail)) {
    return false;
  }

  return true;

}


function nietLeeg(elem) {

  if (elem == null) {
    var elem = $('.notchecked');
  }

  elem.each(function() {
    var $this = $(this);
    if ($this.val() && $this.attr('id') != 'email') {
      $this.removeClass('nochecked').addClass('checked');
    } else if ($this.attr('id') == 'email' && validateEmail($this.val())) {
      $this.removeClass('nochecked').addClass('checked');
    } else {
      $this.removeClass('checked').addClass('nochecked');
    }
  });
}

＆＃13;

.contactmiddle>input[type="text"] {
  background-color: black;
  border: 1px solid white;
  color: white;
  margin-bottom: 10px;
  height: 45px;
  width: 100%;
  border-radius: 5px;
  padding-left: 5px;
}
.contactright>input[type="text"] {
  background-color: black;
  border: 1px solid white;
  color: white;
  width: 100%;
  height: 103px;
  margin-bottom: 10px;
  border-radius: 5px;
  padding-left: 5px;
}
.checked {
  background-image: url("http://www.freeiconspng.com/uploads/check-mark-31.png");
  background-size: 50px;
  background-repeat: no-repeat;
  background-position: right;
}
.nochecked {
  background-image: url("http://www.falconpedia.de/images/6/63/No_check.png");
  background-size: 50px;
  background-repeat: no-repeat;
  background-position: right;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<section class="contactmiddle">
  <input class="notchecked" id="naam" name="contactpersoon" placeholder="Name" required="" type="text">
  <input class="notchecked" id="email" name="contactpersoon" placeholder="Email" required="" type="text">
  <input class="notchecked" id="subject" name="contactpersoon" placeholder="Subject" required="" type="text">
</section>
<section class="contactright">
  <input class="notchecked" id="bericht" name="contactpersoon" placeholder="Message" required="" type="text">
  <input class="knop" onclick="nietLeeg();" type="button" value="send">&nbsp;
</section>

＆＃13;

Answer 2

您可以添加以下Jquery / JS代码：

function nietLeeg () {
       var inputs = $('input');
        inputs.each(function(){
      var presentInput = $(this);
      if(presentInput.val() == ''){
      presentInput.removeClass('checked');
      presentInput.addClass('nochecked');
      }
      else{
      presentInput.addClass('checked');
      presentInput.removeClass('nochecked');
      }
      });

    };


  $('input').on('blur',function(){
  nietLeeg();
  })

在每个blue事件中，将调用该函数。该功能以下列方式工作：如果input字段为空 - >它将删除checked类并添加nochecked类。对于非空input字段，反之亦然。

如何对我的功能进行实时更新？ JS / JQuery的

2 个答案: