用户更改输入后表单字段仍未定义答案

【问题标题】：Form field still undefined after user changes input用户更改输入后表单字段仍未定义
【发布时间】：2014-12-02 15:00:38
【问题描述】：

我有以下 javascript 代码的 sn-p 代码，它应该用作我的表单验证，以确保当用户提交表单时没有任何字段为空。该代码适用于“Detector_Type”作为其默认值为 ""。

但是，当我将文本添加到下一个字段“Name_and_Part_Number”并尝试提交时，即使我在文本字段中输入了文本，该值仍会在控制台日志中显示为“未定义”。

为什么会发生这种情况，我该如何做才能使当我输入文本时它不再变得未定义？

编辑 1：存储在表单中的数据存储为 RoR 变量，这可能会有所不同。

JS代码：

function validateForm(formId)

 var fields = ["Detector_Type", "Name_and_Part_Number", "Type", "FPA_Size", "Pitch"]
 var errors = ["Detector Type", "Name and Part Number", "Type", "FPA Size", "Pitch"]
  var i, l = fields.length;
  var fieldname; 
  for (i = 0; i < l; i++) {    
    fieldname = fields[i];
    console.log(fieldname + ": " + document.getElementById(fieldname).value);
    if ((document.getElementById(fieldname).value === "") || (typeof document.getElementById(fieldname).value === 'undefined'))) {
      alert(errors[i] + " can not be empty");
      return false;
    }

  }
  return true;
 }  
}

HTML 代码：

...
<div class="field">
    <%= f.label :Detector_Type %><br>
  <select class="flat-text" style="width: 240px;" name='spreadsheet[Detector_Type]'     id='Detector_Type' onclick="toggle_visibility('Detector_Type');" >
      <option value=''>Choose a category...</option>
      <option value="GMAPD">GMAPD</option>
      <option value="DFPA">DFPA</option>
      <option value="Other">Other </option>  
   </select> 

  </div>   

  <div class="field" id="Name_and_Part_Number">
    <%= f.label :Name_and_Part_Number %><br>
    <%= f.text_field :Name_and_Part_Number%>
  </div>
  <div class="field" id= "Type">
    <%= f.label :Type %><br>
    <%= f.text_field :Type %>
  </div>
  <div class="field" id= "FPA_Size">
    <%= f.label :FPA_Size %><br>
    <%= f.text_field :FPA_Size %>
  </div>
  <div class="field" id= "Pitch">
    <%= f.label :Pitch %><br>
    <%= f.text_field :Pitch %>
  </div>
...

【问题讨论】：

标签： javascript html ruby-on-rails validation

【解决方案1】：

Field 是一个 DIV，要访问 HTML 元素的文本值，您可以使用与 value 相对的 innerHTML 属性。

【讨论】：

我假设您的意思是在我的代码的“typeof ...”条件下？如果我将值更改为 innerHTML ，即使没有输入，它仍然会提交 from
在 Div 元素属性值未定义。要获得价值，我建议您验证： document.getElementById(fieldname).innerHTML == ""
如果我将“value=""”添加到我的 DIV 然后检查： if ((document.getElementById(fieldname).value === "") || (document.getElementById(fieldname) .innerHTML === "")) 如果在该字段中没有输入任何内容，表单仍会提交。（对不起，如果我不理解并错误地执行了您的建议）
另外，如果我使用 (document.getElementById(fieldname).getAttribute('value') === "") 作为我检查的后半部分，它会捕获错误，但是在编辑表单时它仍然认为值是“”
如果有任何帮助将 innerHTML 打印到控制台会给出：“Name_and_Part_Number: 名称和部件号
"

【解决方案2】：

如果要确保每个 text_field 不为空，则需要检查字段而不是 div。您可以将一个子选择器添加到您的 javascript 中。

类似

$('#id input').first().val()

会让你得到那个 div 下的输入，然后它就是值。

如果表单需要所有字段，那么您可以只对所有输入使用选择器，然后循环遍历它们，而不是循环遍历 ID 的静态列表。

【讨论】：

不幸的是，并非所有字段都是必需的（以上是一个简短的列表）。您是否还建议用您的代码替换我的“或”的后半部分？如果是这样，那也不起作用。
@JBarry465 那么问题就变成了您是否使用jquery？如果是这样，那么您将整个 or 语句替换为 $('#id input').first().val() === '' || $('#id input').first().val() === undefined
@JBarry465 另外一个想法是使用 HTML5 数据属性来指定哪些需要验证，然后使用诸如$('[data-validation = true]') 之类的选择器来获取需要验证并通过它运行的元素列表。
我很少使用 jquery，因为我并不真正了解它（对 javascript 也很陌生）。我可以在完成主要工作的 rails 字段中使用“required: => true”，但这会使自定义错误消息更难处理。

【解决方案3】：

最终只使用 rails :require => 真正的验证，没有自定义错误消息

【讨论】：