0

私<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 コードは機能しません。平地警報が出ません。何が欠けているのかわからない。

PS：私のページにはライブラリファイルの使用に制限があるため、Jqueryは必要ありません。

4

3 に答える 3

1

フォームの送信を停止するには、validateでfalseを返す必要があります。これにより、ページが再読み込みされます。

編集

https://gist.github.com/2299607getElementsByClassNameから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';
    }
}
于 2012-07-30T08:38:07.910 に答える
0

あなたのコードはクロームで動作します。これはデモです。

document.getElementsByClassName一部の古いブラウザでは機能しません。こちらを確認してください。

于 2012-07-30T08:36:25.583 に答える
0

まず、検証が発生した場合でもページの投稿を停止するために関数から値を返す必要があります。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;
}
于 2012-07-30T08:40:01.410 に答える