表单提交报错AdjustmentBuyerPrice无法聚焦 联动下拉代码排查

触发报错的核心逻辑漏洞 #

这个错误是浏览器原生表单校验机制触发的：当一个被标记为校验无效（比如必填值为空）的表单控件处于display:none的不可见状态时，浏览器无法将焦点跳转至该控件展示校验提示，就会抛出「An invalid form control with name='AdjustmentBuyerPrice' is not focusable」错误。
对应代码里的具体问题：

• 硬编码的必填属性未做状态联动：HTML模板中AdjustmentBuyerPrice下拉框写死了required属性，页面初始加载时JS只执行了整行隐藏操作，没有在隐藏状态下同步移除该下拉框的必填标记。
• 隐藏控件未彻底阻断校验：切换前置下拉到无关联选项时，代码仅做了元素隐藏、必填属性移除的操作，没有对隐藏的表单控件做校验屏蔽，一旦该下拉框之前因必填规则被标记为校验无效，就算后续移除了required属性，浏览器仍会将其纳入校验范围，尝试定位这个隐藏控件完成提示，最终触发报错。
• 属性操作方式存在兼容风险：代码中使用attr方法操作required布尔属性，在部分浏览器下会出现属性移除不生效、状态不同步的问题。

具体修复步骤 #

• 移除HTML中AdjustmentBuyerPrice下拉框硬编码的required属性，将校验规则的控制权完全交由JS动态管理，修改后的初始下拉框代码：

  <select id="AdjustmentBuyerPrice" name="AdjustmentBuyerPrice"> 
      <option value="">Select Adjustment Buyer Price Type</option>
      {html_options options=$tpl_adjustment_buyer_price}
  </select>
  

• 补全页面初始加载的逻辑，在隐藏关联行的同时重置下拉框状态，匹配初始的隐藏场景，避免默认的必填属性触发校验。
• 给隐藏/显示的联动逻辑补充disabled属性控制：当关联行隐藏时，给下拉框加上disabled标记——带disabled的表单控件不会被浏览器纳入原生校验范围，也不会随表单提交，能从根源上避免隐藏控件触发校验报错的问题；当关联行显示时，移除disabled标记，保证控件可以正常取值提交。
• 统一使用prop方法操作布尔类型的表单属性，避免不同浏览器的属性解析差异导致状态不同步。
• 修复后的完整JS逻辑：

  $(document).ready(function() {
      // 初始化关联行状态：隐藏，同时重置下拉框的校验与提交状态
      $('#adjustment_buyer_price').hide();
      $('#AdjustmentBuyerPrice').prop({
          required: false,
          disabled: true
      });
  
      // 绑定前置下拉的切换事件
      $("#adjustment_type").change(function () {
          const cur_option_val = $(this).val(); 
          if (cur_option_val == "ItemPriceAdjustments") {
              // 匹配关联条件：显示行，开放控件校验与提交能力
              $('#adjustment_buyer_price').show();
              $('#AdjustmentBuyerPrice').prop({
                  required: true,
                  disabled: false
              });
          } else {
              // 不匹配关联条件：隐藏行，阻断控件校验与提交能力
              $('#adjustment_buyer_price').hide();
              $('#AdjustmentBuyerPrice').prop({
                  required: false,
                  disabled: true
              });
          }
      });
  });
  

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