如何用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">×</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) } }); } });
问题表现:
仅能获取表格中第一条记录的值,选择其他记录时无法获取对应值,也无错误提示。
关键问题修正点
- 重复ID冲突:原代码中每个模态框都使用相同ID(如
idCustomersEdit),DOM中ID必须唯一,已改为类名并通过当前模态框上下文查找元素,避免获取到第一条记录的值。 - 事件绑定类名不匹配:原代码绑定
.form_input,但输入框实际类是.form__input,导致事件无法触发,已修正绑定类名。 - 变量名不一致:原代码定义
longitudRFC却使用longRFC,导致逻辑判断失效,已统一变量名。 - 条件逻辑错误:长度判断用
||(或)会导致任何长度都满足条件,改为&&(且)确保长度在10-14区间内。
内容的提问来源于stack exchange,提问作者Andrea Hernández
相关产品推荐
相关产品推荐

