onSubmit проверка стиль изменение этикетки

Question

Я пытаюсь получить эту форму, чтобы изменить цвет метки после представления, если поле пустое, а затем вернуться к нормальной, когда поле заполнено.

Это поведение было бы что-то подобное до: 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 не так хорошо. Пожалуйста помоги!

Answer 1

Вот ваш Working sample</>

Answer 2

Вы должны осмотреть Knockoutjs style binding с довой стоимостью.

Answer 3

можно добавить 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; 
     } 
    } 
} 

См: updated Fiddle

Answer 4

Попробуйте

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

Демо: Fiddle

Answer 5

Вы можете использовать Jquery проверки плагин ... он имеет поддержку для всех видов проверок, а также изменение цвета этикетки & Может отображать соответствующие сообщения об ошибках

Answer 6

Здесь очень простой, умный, но эффективный способ сделать это, используя удивительную привязку к нокауту здесь: рабочий образец: JsFiddle Link

var viewModel = { 
validation: ko.observable(function(){}) 
};