��权限没有,则隐藏 function forum_list_access_filter($forumlist, $gid, $allow = 'allowread') { global $grouplist; if (empty($forumlist)) return array(); if (1 == $gid) return $forumlist; $forumlist_filter = $forumlist; $group = $grouplist[$gid]; foreach ($forumlist_filter as $fid => $forum) { if (empty($forum['accesson']) && empty($group[$allow]) || !empty($forum['accesson']) && empty($forum['accesslist'][$gid][$allow])) { unset($forumlist_filter[$fid]); } unset($forumlist_filter[$fid]['accesslist']); } return $forumlist_filter; } function forum_filter_moduid($moduids) { $moduids = trim($moduids); if (empty($moduids)) return ''; $arr = explode(',', $moduids); $r = array(); foreach ($arr as $_uid) { $_uid = intval($_uid); $_user = user_read($_uid); if (empty($_user)) continue; if ($_user['gid'] > 4) continue; $r[] = $_uid; } return implode(',', $r); } function forum_safe_info($forum) { //unset($forum['moduids']); return $forum; } function forum_filter($forumlist) { foreach ($forumlist as &$val) { unset($val['brief'], $val['announcement'], $val['seo_title'], $val['seo_keywords'], $val['create_date_fmt'], $val['icon_url'], $val['modlist']); } return $forumlist; } function forum_format_url($forum) { global $conf; if (0 == $forum['category']) { // 列表URL $url = url('list-' . $forum['fid'], '', FALSE); } elseif (1 == $forum['category']) { // 频道 $url = url('category-' . $forum['fid'], '', FALSE); } elseif (2 == $forum['category']) { // 单页 $url = url('read-' . trim($forum['brief']), '', FALSE); } if ($conf['url_rewrite_on'] > 1 && $forum['well_alias']) { if (0 == $forum['category'] || 1 == $forum['category']) { $url = url($forum['well_alias'], '', FALSE); } elseif (2 == $forum['category']) { // 单页 $url = ($forum['threads'] && $forum['brief']) ? url($forum['well_alias'] . '-' . trim($forum['brief']), '', FALSE) : url($forum['well_alias'], '', FALSE); } } return $url; } function well_forum_alias() { $forumlist = forum_list_cache(); if (empty($forumlist)) return ''; $key = 'forum-alias'; static $cache = array(); if (isset($cache[$key])) return $cache[$key]; $cache[$key] = array(); foreach ($forumlist as $val) { if ($val['well_alias']) $cache[$key][$val['fid']] = $val['well_alias']; } return array_flip($cache[$key]); } function well_forum_alias_cache() { global $conf; $key = 'forum-alias-cache'; static $cache = array(); // 用静态变量只能在当前 request 生命周期缓存,跨进程需要再加一层缓存:redis/memcached/xcache/apc if (isset($cache[$key])) return $cache[$key]; if ('mysql' == $conf['cache']['type']) { $arr = well_forum_alias(); } else { $arr = cache_get($key); if (NULL === $arr) { $arr = well_forum_alias(); !empty($arr) AND cache_set($key, $arr); } } $cache[$key] = empty($arr) ? '' : $arr; return $cache[$key]; } ?>Pure javascript html 5 text type number range validation - Stack Overflow
最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

Pure javascript html 5 text type number range validation - Stack Overflow

programmeradmin6浏览0评论

I have a page that I'm building and do not have the option to import jQuery. I need to be able to determine if any textboxes are marked with an html 5 invalid psuedoclass using a pure javascript solution. Said more simply: I need to use javascript to determine if any of the textboxes have the red outline that textboxes get marked with if you, for example, put text in a type=number field.

Just for pleteness, here's some sample code:

<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(); }
}

I have a page that I'm building and do not have the option to import jQuery. I need to be able to determine if any textboxes are marked with an html 5 invalid psuedoclass using a pure javascript solution. Said more simply: I need to use javascript to determine if any of the textboxes have the red outline that textboxes get marked with if you, for example, put text in a type=number field.

Just for pleteness, here's some sample code:

<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(); }
}
Share Improve this question asked Oct 8, 2015 at 20:20 user4593252user4593252 3,5067 gold badges32 silver badges58 bronze badges 2
  • 3 ":invalid" is a css selector you can use to find them – dandavis Commented Oct 8, 2015 at 20:22
  • 1 To add to @dandavis 's answer, :invalid is supported only from IE10+, if that's any consideration to you. – Artless Commented Oct 8, 2015 at 20:28
Add a ment  | 

5 Answers 5

Reset to default 3

You can use checkValidity() method to detect the validity of a html5 input element.

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

Here is the fiddle:

http://jsfiddle/k7moorthi/saobbfzo/

You can use querySelectorAll

document.querySelectorAll('input:invalid') return an array of all invalid input in the document, you can replace document by any type of node.

Add some css like :invalid{background-color: rgba(250,0,0,.15);} can be usefull also.

Give an id or a class for each element and give the code this way:

window.onload = function () {
  document.getElementById("theFrm").onsubmit = function () {
    var inputs = document.querySelectorAll(".input");
    for (var i in inputs)
      if (!inputs[i].validity.valid) {
        inputs[i].focus();
        return false;
      }
    ajaxSubmit();
    return false;
  };
};
*:invalid, .error {border: 1px solid #f00; background: #f99;}
<form action="" id="theFrm">
  <input type="number" min="1" max="31" id="txtCalDays" required placeholder="##" class="input" />
  <input type="submit" onclick="ValidateForm()" /> 
</form>

I think the method you are looking for is checkValidity().

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

;(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);
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;
}
<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>

You can use ValidityState.valid:

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");
    }
});
input.invalid {
    outline: 1px solid red;
}
<input type="number" id="test">

Now you can check for the input.invalid instead of input:invalid selector.

To make this cross-browser, you can bind this event listener in addition to the change event, also to the input, blur, keyup and keydown events. Furthermore you will need a polyfill for classList.

发布评论

评论列表(0)

  1. 暂无评论