textarea的trim空值校验移至模态框后失效问题解决

问题背景 #

我之前碰到个挺棘手的问题：原本在iframe里运行完全正常的表单textarea空值校验，把表单移到主页面的模态框（通过外部twig加载）之后，校验始终返回null，根本没法判断用户有没有输入内容。

相关代码片段如下：

校验脚本 #

$('#submit-suggestion').click(function() { 
  if (!$.trim($('#items_item_eresource_notes').val())){
    alert('您必须提供本次修订的理由'); 
    return false; 
  } 
});

Twig生成的textarea HTML #

<textarea id="items_item_eresource_notes" name="items_item[eresource_notes]" placeholder="请说明这是重大还是次要升级，有哪些变更等"></textarea>

模态框相关代码 #

触发链接：

<a class="revision" data-toggle="modal" data-target="#requestModal" href="{{ path('publisher_suggest_revision', { 'publisher_id': pub_id, 'title_id': title_id }) }}">建议修订</a>

模态框结构：

<div class="modal fade" id="requestModal" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" aria-hidden="true" data-dismiss="modal">&times;</button>
        <h2 class="modal-title" id="modalTitle">建议修订</h2>
      </div>
      <div class="modal-body">
      </div>
    </div>
  </div>
</div>

模态框加载脚本：

$('#requestModal').modal('show').find('.modal-body').load($(this).attr('href'));

问题排查与根源 #

折腾了好一阵才揪出问题：外部twig加载的表单和父页面用了完全相同的textarea ID——因为两者都来自同一个formbuilder模板，导致页面里出现了重复ID的元素。当jQuery通过$('#items_item_eresource_notes')获取元素时，只会返回第一个匹配的（也就是父页面里的那个），模态框里的textarea根本没被选中，自然val()返回null，校验直接失效。

解决方案 #

既然问题出在重复ID上，那核心解决思路就是给模态框里的textarea设置唯一ID，避免和页面已有元素冲突。

修改前（来自formbuilder模板的代码） #

<div id="form-eresource">{{ form_row(form.eresource_notes, { 'attr': { 'placeholder' : '请说明这是重大还是次要升级，有哪些变更等'}}) }}</div>

修改后（手动指定唯一ID） #

<div id="form-eresource"><textarea id="eresource-notes" name="items_item[eresource_notes]" placeholder="请说明这是重大还是次要升级，有哪些变更等"></textarea></div>

同时别忘了把校验脚本里的选择器也对应改成新ID：

$('#submit-suggestion').click(function() { 
  if (!$.trim($('#eresource-notes').val())){
    alert('您必须提供本次修订的理由'); 
    return false; 
  } 
});

这么一改之后，模态框里的textarea就能被正确选中，空值校验也就正常工作了。

内容的提问来源于stack exchange，提问作者nomistic