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"); =＆gt; field.css("color","white");

以下是演示：http://jsfiddle.net/eehV6/

JQuery表单验证

1 个答案: