使用JavaScript更改输入标记的表单验证

Question

我需要使用JavaScript验证表单。由于我使用字段名称表中的数据来打印每个字段（如姓名，地址，电话号码），因此表单保留更改。我正在使用循环打印字段和相应文本输入标签的标签。 （例如名称：输入名称的文本框，输入电话号码的文本框：输入电话号码的文本框）。最后在提交表单并进入详细信息表时将这些值存入数组中。

以下是打印每个字段和文本框代码：

while ($row=mysql_fetch_array($result)){ 
    echo'<labelfor='.$row['field_name'].'name=field_id>'.$row['field_name'].':</label>';       
    echo'<inputtype="text" name=field_name[]id="'.$row['field_id'].'":value="'.$row['field_value'].'" size="20" class = "inpBox" >'; 
} 

现在，我需要检查这些字段是否为空使用JavaScript，然后更改特定文本框的样式。任何帮助将不胜感激。

Answer 1

你会想要钩住表单的提交事件。然后，你可以这样做：

这是jQuery的：

$("form").submit(function{ 
    $('input[type="text"]',"form").each(function(){ 
     var $me = $(this); 
     var status = true; 
     if($me.val() == ""){ 
      $me.addClass("input-validation-error"); 
      status = false; 
     } 
     //Return status. True=Form is valid, False=Form is NOT valid 
     return status; 
    }); 
}); 

你可以在这里阅读更多：http://api.jquery.com/submit/

要获取JavaScript中的值，你可以这样做：

var inputs = document.getElementsByTagName("input"); 
for (var i = 0; i < inputs.length; i++) { 
    var me = inputs[i]; 
    if(me.value == "") { 
     me.className = "input-validation-error"; 
    } 
}​ 

Answer 2

一般谷歌的“动态表单验证”

您的特定情况下，你会有兴趣 见https://developer.mozilla.org/en/DOM/document.getElementsByClassName 和遍历所有元素。您可能需要为输入字段添加额外的属性来定义是否需要验证以及所需验证的类型。