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

Form field still undefined after user changes input

本文关键字：表单 字段 未定义 输入 用户      更新时间：2023-09-26

我有以下javascript代码片段，它应该充当我的表单验证，以确保当用户提交表单时，没有任何字段为空。该代码适用于"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;
 }  
}

网页代码：

...
<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>
...

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

如果要

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

所以像 

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

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

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

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

相关文章：