You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何用JavaScript和AJAX验证编辑表单?AJAX函数无法触发排查

问题:无法触发AJAX函数且仅能获取第一条记录的值

更新:
应用建议的修改后,我能够获取到选中条目的RFC,但仍然无法进入AJAX函数。

我的表单

<!-- 开始模态框 -->
<form action="{{ route('admin.customers.update', $c->id) }}" method="POST">
  @csrf @method('PUT')
  <!-- 模态框 -->
  <div class="modal fade modalEdit" name="myModalE" id="myModalE{{ $c->id }}" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">{{ __('编辑客户') }}</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="form-row" id="group__rfcEdit">
            <div class="form-group col-4 form__group">
              <input type="text" class="idCustomersEdit" name="idCustomersEdit" value="{{ $c->id }}" hidden>
              <strong>{{ __('RFC') }}:</strong>
              <input class="form-control form__input" type="text" name="rfcEdit" class="rfcEdit" value="{{ $c->RFC }}" maxlength="14" minlength="10">
              <div class="RFCEdit"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>
<!-- 结束模态框 -->

JavaScript代码

$(document).on('keyup','.form__input', function(e) {
  const target = $(e.currentTarget); 
  const currentModal = target.closest('.modalEdit');
  var rfc = target.val();
  var longitudRFC = target.val().length;
  var idRFCEdit = currentModal.find('.idCustomersEdit').val();

  if (longitudRFC === 0) {
    $('#razonSocialEditar').attr('disabled', false);
    $('#calleEditar').attr('disabled', false); 
  }

  if (longitudRFC < 10) {
    currentModal.find('.RFCEdit').html("<strong style='color: red'>RFC长度必须在10到14个字符之间</strong>");
    currentModal.find('#group__rfcEdit').addClass('form__group-false');

    $('#razonSocialEditar').attr('disabled', true);
    $('#calleEditar').attr('disabled', true); 
    $('#numeroEditar').attr('disabled', true); 
    $('#coloniaEditar').attr('disabled', true); 
    $('#codigoPostalEditar').attr('disabled', true); 
    $('#emailEditar').attr('disabled', true); 
    $('#telefonoEditar').attr('disabled', true);
    $('.btn-successEdit').attr('disabled', true);
  }
  else if (longitudRFC >= 10 && longitudRFC <= 14) {
    var idRFCEditE = currentModal.find('.idCustomersEdit').val();

    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });

    var url = '{{ url('validateRFCEdit') }}';

    $.ajax({
      url: url,
      method: 'POST',
      data: {
        idRFCEditE,
        rfc
      },
      dataType: "JSON",
      success: function(response) {
        if (response.success == 0) {
          currentModal.find('.RFCEdit').html("");
          currentModal.find('#group__rfcEdit').removeClass('form__group-incorrecto').addClass('form__group-correcto');
          $('.btn-successEdit').attr('disabled', false);
          $('#razonSocialEditar, #calleEditar, #numeroEditar, #coloniaEditar, #codigoPostalEditar, #emailEditar, #telefonoEditar').attr('disabled', false);
        } else if (response.success == 1) {
          console.log('进入选项1,不满足条件');
          $(".modalEditar #respuestaRFCEdit").html("");
          $('#respuestaRFCEdit').html(response.message);
          currentModal.find('#group__rfcEdit').removeClass('form__group-correcto').addClass('form__group-incorrecto');
          $('#razonSocialEditar, #calleEditar, #numeroEditar, #coloniaEditar, #codigoPostalEditar, #emailEditar, #telefonoEditar').attr('disabled', true);
          $('.btn-successEdit').attr('disabled', true);
        } else if (response.success == 2) {
          $(".modalEditar #respuestaRFCEdit").html("");
          currentModal.find('#group__rfcEdit').removeClass('form__group-incorrecto').addClass('form__group-correcto');
          $('#respuestaRFCEdit').html(response.message)
          $('.btn-successEdit').attr('disabled', false);
          $('#razonSocialEditar, #calleEditar, #numeroEditar, #coloniaEditar, #codigoPostalEditar, #emailEditar, #telefonoEditar').attr('disabled', false);
        }
      },
      error: function(error) {
        console.log(error)
      }
    });
  }
});

问题表现:
仅能获取表格中第一条记录的值,选择其他记录时无法获取对应值,也无错误提示。


关键问题修正点

  1. 重复ID冲突:原代码中每个模态框都使用相同ID(如idCustomersEdit),DOM中ID必须唯一,已改为类名并通过当前模态框上下文查找元素,避免获取到第一条记录的值。
  2. 事件绑定类名不匹配:原代码绑定.form_input,但输入框实际类是.form__input,导致事件无法触发,已修正绑定类名。
  3. 变量名不一致:原代码定义longitudRFC却使用longRFC,导致逻辑判断失效,已统一变量名。
  4. 条件逻辑错误:长度判断用||(或)会导致任何长度都满足条件,改为&&(且)确保长度在10-14区间内。

内容的提问来源于stack exchange,提问作者Andrea Hernández

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.22 19:24:57