Question

我的页面中有<div>，如下所示：

 <div class="errordiv" style="display: none;">Username is empty</div>

我有一个输入字段和一个这样的按钮：

<input type="textbox" id="txt1" />
<input type="button" value="Submit" id="btn1" onclick="validate();" />

我试过了，

function validate() {
    //alert('hi');
    var inptextbox = document.getElementById('txt1');
    //alert('level zero');
    var errorMsg = document.getElementsByClassName('errordiv').item();
    //alert('level ground');
    if (inptextbox.value == '') {
        //alert('hi2');
        errorMsg.style.display = 'block';
    } else {
        errorMsg.style.display = 'none';
    }
}

以上js代码无效。我没有得到平地警报。我不知道遗失了什么。

P.S：我不想要Jquery，因为我的页面对使用库文件有一些限制。

Answer 1

您需要在验证中返回false以停止提交表单，从而重新加载页面

修改

添加getElementsByClassName的polyfill，支持https://gist.github.com/2299607

中的IE7

// Add a getElementsByClassName function if the browser doesn't have one
// Limitation: only works with one class name
// Copyright: Eike Send http://eike.se/nd
// License: MIT License
if (!document.getElementsByClassName) {
  document.getElementsByClassName = function(search) {
    var d = document, elements, pattern, i, results = [];
    if (d.querySelectorAll) { // IE8
      return d.querySelectorAll("." + search);
    }
    if (d.evaluate) { // IE6, IE7
      pattern = ".//*[contains(concat(' ', @class, ' '), ' " + search + " ')]";
      elements = d.evaluate(pattern, d, null, 0, null);
      while ((i = elements.iterateNext())) {
        results.push(i);
      }
    } else {
      elements = d.getElementsByTagName("*");
      pattern = new RegExp("(^|\\s)" + search + "(\\s|$)");
      for (i = 0; i < elements.length; i++) {
        if ( pattern.test(elements[i].className) ) {
          results.push(elements[i]);
        }
      }
    }
    return results;
  }
}

function validate() {
    //alert('hi');
    var inptextbox = document.getElementById('txt1');
    //alert('level zero');
    var errorMsg = document.getElementsByClassName('errordiv')[0];
    //alert('level ground');
    if (inptextbox.value == '') {
        //alert('hi2');
        errorMsg.style.display = 'block';
        return false;
    } else {
        errorMsg.style.display = 'none';
    }
}

Answer 2

您的代码适用于Chrome。这是demo。

document.getElementsByClassName不适用于某些旧版浏览器，请查看here。

Answer 3

首先，您需要从函数返回一个值，以便在验证发生时停止发回页面，将HTML更改为：

<input type="button" value="Submit" id="btn1" onclick="return validate();" />

然后你的脚本：

function validate() {
    var inptextbox = document.getElementById('txt1');
    var errorMsg = document.getElementsByClassName('errordiv').item();

    if (inptextbox.value == '') {
        errorMsg.style.display = 'block';
        return false;
    }

    return true;
}

使用getElementsByClassName在点击时显示Div的Javascript

3 个答案: