Проверка формы JQuery

Question

Мне нужно выполнить проверку формы с помощью jQuery. Но у меня проблема.

У меня есть форма HTML, как показано ниже:

<FORM id="formID" method="POST" onsubmit="return checkRequiredFields(this)" action=""> 
    <td><input class="required" type="text" id="input1" value="" /></td> 
    <td><input class="required" type="text" id="input2" value=""/> </td> 
    <td><input class="required" type="text" id="input3" value=""/> </td> 
    <td><input type="text" id="input4" value=""/> </td> 
    <td><input type="submit" id="save" value="Save" /></td> 
</FORM> 

Первые три входные текстовые поля обязательные для заполнения поля. Я попытался написать сценарий, как показано ниже:

<script type="text/javascript"> 
function checkRequiredFields(form){ 
    var no_errors = true; 
    $(form).find(".required").each(function(){ 
     alert("Inside Loop"); 
      var field = $(this); 
     if (field.val() == ""){ 
      $("#"+field).css("color","red"); 
      no_errors = false; 
     } else {  
      $("#"+field).css("color","white"); 
     } 
    }); 
    return no_errors; 
} 

</script> 

Но, приведенный выше код не работает, как я ожидал. alert() никогда не выполняется, что означает, что элемент управления не находит элемент с классом «требуется». Итак, в чем проблема в моем коде?

Answer 1

$("#"+field).css("color","red"); не является правильным. field - объект не строка, но поскольку это уже объект jQuery, вы можете просто сделать это: field.css("color","red");. Вы должны сделать это для другого .css() вызова тоже: $("#"+field).css("color","white"); =>field.css("color","white");

Вот демо: http://jsfiddle.net/eehV6/