Question

我有一个我正在构建的页面，并且没有导入jQuery的选项。我需要能够确定是否有任何文本框使用纯JavaScript解决方案标记为html 5无效的伪造类。更简单地说：我需要使用javascript来确定是否有任何文本框具有文本框被标记的红色轮廓，例如，如果您将文本放在type = number字段中。

为了完整起见，请参阅以下示例代码：

<input type="number" min="1" max="31" id="txtCalDays" placeholder="##"/>
<input type="button" onclick="ValidateForm()"/> 
...
<script>
...
function ValidateForm(){
    ... //magic happens here
    if (numberInvalidTextboxes == 0){ SubmitFormViaAjax(); }
}

Answer 1

您可以使用querySelectorAll

document.querySelectorAll('input:invalid')返回文档中所有无效输入的数组，您可以用任何类型的节点替换document。

添加一些像:invalid{background-color: rgba(250,0,0,.15);}这样的css也很有用。

Answer 2

您可以使用checkValidity()方法检测html5输入元素的有效性。

document.getElementById('txtCalDays').checkValidity()

这是小提琴：

http://jsfiddle.net/k7moorthi/saobbfzo/

Answer 3

我认为您正在寻找的方法是checkValidity（）。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/checkValidity

＆＃13;

;(function(w,d,undefined) {
  
  "use strict";
  
  function init() {
    // bind checkValidity() to button click
    d.querySelector("button.validity").addEventListener("click",checkValidity);
  }
  
  // loop through inputs and check validity
  var checkValidity = function() {
    var inputs = d.querySelectorAll('#f input');
    [].forEach.call(inputs,function(input) {
      alert( 'validness of ' + input.name + ' is ' + input.checkValidity() );
    });
  };
  
  // inititalize only when the DOM is ready
  d.addEventListener("DOMContentLoaded",init);
  
})(window,document);

＆＃13;

body {
  background-color: #DEF;
}
#f {
  width: 222px;
  position: relative;
  padding: 2em;
  margin: auto;
}
#f > * {
  margin-bottom: .25em;
}
#f label, button {
  float: left;
  clear: left;
  width: 100px;
}
#f input, #f button {
  float: left;
  width: 100px;
}

＆＃13;

<form id="f">
  
  <label for="tel">Just Numbers</label><input type="text" name="numbrz" pattern="\d+" />
  
  <label for="email">Email</label><input type="email" name="email" />
  
  <button type="button" class="validity">check validity</button>
  
</form>

＆＃13;

Answer 4

您可以使用ValidityState.valid：

＆＃13;

var input = document.getElementById("test");

input.addEventListener("change", function (event) {
    
    if (test.validity.valid) {
        input.classList.add("valid");
        input.classList.remove("invalid");
    } else {
        input.classList.add("invalid");
        input.classList.remove("valid");
    }
});

＆＃13;

input.invalid {
    outline: 1px solid red;
}

＆＃13;

<input type="number" id="test">

＆＃13;

现在，您可以检查input.invalid而不是input:invalid选择器。

要制作此跨浏览器，您可以在change事件之外绑定此事件侦听器，也可以绑定input，blur，keyup和{{ 1}}事件。此外，您需要classList的填充。

纯javascript html 5文本类型编号范围验证

4 个答案: