0 
function validateWieslid() {

var countnummer = $("nummer").val().length;
var countpin = $("pin").val().length;

if (countnummer.length < 6) { 
    document.getElementById("lrError").innerHTML = " Lidnummer moet 6 cijfers lang zijn.";
    document.getElementById("lrError").style.backgroundColor = "red";
 } 
if (countpin.length < 4) { 
    document.getElementById("pinError").innerHTML = " Pin moet 4 cijfers lang zijn.";
    document.getElementById("pinError").style.backgroundColor = "red";
 } 
}

それが私のJavaScript関数です

            <div id="wies">
                <label>Lidnummer:</label> 
                <input name="lidnummer" size="30" type="text" id="nummer" maxlength="6"><br>
                <label>WIES pin:</label> 
                <input name="pin" size="30" type="text" id="pin" maxlength="4"><br>
           </div>

     <div id="lrError"></div>
     <div id="pinError"></div>

それが問題の HTML コードです。

id="nummer" を含む入力は 6 文字の長さの入力であると想定され、id="pin" を含む入力はピン番号であると想定されるため、4 文字の長さになります。

入力長が 6 未満の場合に JavaScript に表示されるテキストを表示するようにしようとしていますが、これは機能しませんか? 私は初心者のコーダーであり、これは非常に簡単な解決策かもしれませんが、支援が必要です! ありがとう ：）

4

2 に答える 2

1

ID から要素にアクセスするには、ID 名の前に # を使用する必要があります。たとえば、次の要素にアクセスする場合-

<input name="lidnummer" size="30" type="text" id="nummer" maxlength="6">

私が使用します

$("#nummer")

メソッドの最初の 2 行は機能しvalidateWieslid()ません。そのはず -

var countnummer = $("#nummer").val().length;
var countpin = $("#pin").val().length;

正しいコードは -

function validateWieslid() {
var countnummer = $("#nummer").val().length;
var countpin = $("#pin").val().length;
var flag = true;
if (countnummer < 6) { 
    document.getElementById("lrError").innerHTML = " Lidnummer moet 6 cijfers lang zijn.";
    document.getElementById("lrError").style.backgroundColor = "red";
    flag = false;
 } 
if (countpin < 4) { 
    document.getElementById("pinError").innerHTML = " Pin moet 4 cijfers lang zijn.";
    document.getElementById("pinError").style.backgroundColor = "red";
    flag = false;
 } 
 return flag;
}

そして、あなたのHTMLコードが-

   <div id="wies">
        <form id="myForm" action="">
        <label>Lidnummer:</label> 
        <input name="lidnummer" size="30" type="text" id="nummer" maxlength="6"><br>
        <label>WIES pin:</label> 
        <input name="pin" size="30" type="text" id="pin" maxlength="4"><br>
        <input type="submit" value="submit"/>
        </form>
   </div>

これで、関数をフォーム送信イベントにバインドできます -

$("#myForm").submit(function( event ) {
  if(!validateWieslid())
  event.preventDefault();
});
于 2013-10-17T18:54:16.970 に答える
0

jquery の依存関係を削除するためにフィドルを更新しました

http://jsfiddle.net/SJJvk/2/

function validateWieslid() {
var countnummer = document.getElementById("nummer").value.length;
var countpin = document.getElementById("pin").value.length;

if (countnummer < 6) { 
  document.getElementById("lrError").innerHTML = " Lidnummer moet 6 cijfers lang zijn.";
  document.getElementById("lrError").style.backgroundColor = "red";
} 
if (countpin < 4) { 
  document.getElementById("pinError").innerHTML = " Pin moet 4 cijfers lang zijn.";
  document.getElementById("pinError").style.backgroundColor = "red";
 } 
}

以下は非推奨になりました:

コードにいくつかの問題がありました。

ここに jsFiddle があります http://jsfiddle.net/SJJvk/

1）関数をトリガーしていませんでした。2) エラー div を呼び出す jQuery から # が欠落していました 3) 変数は実際の数値であり、長さをテストする必要はありません。

function validateWieslid() {
var countnummer = $("#nummer").val().length;
var countpin = $("#pin").val().length;
console.log("cn is " + countnummer);
console.log("cn is " + countpin);

if (countnummer < 6) { 
document.getElementById("lrError").innerHTML = " Lidnummer moet 6 cijfers lang zijn.";
document.getElementById("lrError").style.backgroundColor = "red";
} 
if (countpin < 4) { 
document.getElementById("pinError").innerHTML = " Pin moet 4 cijfers lang zijn.";
document.getElementById("pinError").style.backgroundColor = "red";
} 
}
于 2013-10-17T19:00:36.220 に答える