1

フィールドが空の場合、送信後にこのフォームのラベルの色を変更し、フィールドが入力されると通常に戻るようにしようとしています。

その動作は次のようになります: Onsubmit validate change background requried fields?

ただし、入力をラベルにリンクする方法がわかりません。上記のリンクからjsFiddleを使用しています：

http://jsfiddle.net/interdream/cpG2r/7/

window.onload = function() {
document.getElementById("myForm").onsubmit = function() {
  var fields = this.getElementsByClassName("required"),
      sendForm = true;
  for(var i = 0; i < fields.length; i++) {
    if(!fields[i].value) {
      fields[i].style.backgroundColor = "#ff0000";
      sendForm = false;
    }
    else {
      fields[i].style.backgroundColor = "#fff";      
    }
  }
  if(!sendForm) {
    return false;
  }
}
}

私の JavaScript はあまり良くありません。助けてください！

4

6 に答える 6

2

ここにあなたのワーキングサンプルがあります</>

于 2013-05-22T06:00:51.393 に答える
0

dom 値を使用したKnockoutjs スタイルのバインディングを確認する必要があります。

于 2013-05-22T05:23:22.547 に答える
0

label次のようなタグを追加できます。

<form action="" id="myForm">
    <label for="field1">Required field:</label> <input type="text" name="field1" class="required" /><br />
    <label for="field2">Required field 2:</label> <input type="text" name="field2" class="required" />
    <input type="submit" value="Go" />
</form>

そしてjs部分で

window.onload = function() {
    document.getElementById("myForm").onsubmit = function() {
      var fields = this.getElementsByClassName("required"),
          sendForm = true;
      for(var i = 0; i < fields.length; i++) {
          var lbl = document.getElementsByTagName("label")[i]; //get label
        if(!fields[i].value) {

            lbl.style.color = "red";
            console.log(lbl );
          fields[i].style.backgroundColor = "#ff0000";
          sendForm = false;
        }
        else {
            lbl.style.color = "black";
          fields[i].style.backgroundColor = "#fff";      
        }
      }
      if(!sendForm) {
        return false;
      }
    }
}

参照:更新されたフィドル

于 2013-05-22T05:34:34.790 に答える
0

試す

<form action="" id="myForm">
    <label>Required field: </label><input type="text" class="required" /><br />
    <label>Required field 2: </label><input type="text" class="required" />
    <input type="submit" value="Go" />
</form>

と

window.onload = function() {
    document.getElementById("myForm").onsubmit = function() {
        var fields = this.getElementsByClassName("required"),
            sendForm = true;
        for(var i = 0; i < fields.length; i++) {
            if(!fields[i].value) {
                fields[i].style.backgroundColor = "#ff0000";

                var prev = fields[i].previousSibling;
                while(!/label/i.test(prev.tagName)){
                    prev = prev.previousSibling;
                }

                prev.style.backgroundColor = "#ff0000";
                sendForm = false;
            }
            else {
                fields[i].style.backgroundColor = "#fff";      
            }
        }
        if(!sendForm) {
            return false;
        }
    }
}

デモ:フィドル

于 2013-05-22T05:37:32.617 に答える
0

これは、驚くべきノックアウトバインディングを使用してこれを行うための非常にシンプルでスマートで効果的な方法です。

var viewModel = {
validation: ko.observable(function(){})
};
于 2013-05-22T05:48:58.643 に答える