Ajax表单提交异常咨询：移动端与模态框表单验证失败

核心问题分析 #

你的问题根源出在验证函数的全局DOM选择器上。当前validateDocApplication函数使用的是无上下文的选择器（比如$('input[name="name"]')），当页面同时存在多个表单（桌面端、移动端、模态框）时，这些选择器会默认匹配页面中第一个符合条件的元素——也就是桌面端表单的字段，而非当前提交的表单内的字段。如果桌面端表单的字段为空（或者你操作的是模态框/移动端表单时，选择器仍指向桌面端的空字段），就会触发“所有字段为空”的验证错误。

另外，我注意到模态框表单的下拉框name属性是especialidad，而验证函数里原本是通过$('#spec')获取值——如果页面有多个id="spec"的元素，$('#spec')同样只会匹配第一个，这也会导致下拉框验证失败。

解决方案步骤 #

1. 修改验证函数，增加表单上下文参数

更新validateDocApplication函数，让它接收当前提交的表单作为上下文，确保只在当前表单内查找字段：

// 新增$form参数，指定当前表单上下文
function validateDocApplication(errorArea, $form) { 
  var noError = true;
  // 所有选择器都通过$form.find()限定在当前表单内
  if(!$form.find('input[name="name"]').val()){
    errorArea.html('<div class="alert alert-danger">Por favor, inserte el nombre</div>');
    noError = false;
  }
  if(!$form.find('input[name="surname"]').val()){
    errorArea.html('<div class="alert alert-danger">Por favor, inserte el apellido</div>');
    noError = false;
  }
  if(!$form.find('input[name="email"]').val()){
    noError = false;
    errorArea.html('<div class="alert alert-danger">Por favor, inserte su correo</div>');
  } else {
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    noError = re.test($form.find('input[name="email"]').val());
  }
  if(!$form.find('input[name="phone"]').val()){
    errorArea.html('<div class="alert alert-danger">Por favor, inserte el número de teléfono</div>');
    noError = false;
  }
  if(!$form.find('input[name="colegiado"]').val()){
    errorArea.html('<div class="alert alert-danger">Por favor, inserte el número de colegiado</div>');
    noError = false;
  }
  // 统一通过name属性查找下拉框，避免id冲突
  var valorSpec = $form.find('select[name="especialidad"]').val(); 
  if(!valorSpec || valorSpec === "0"){
    errorArea.html('<div class="alert alert-danger">Seleccione una especialidad</div>');
    noError = false;
  }
  return noError;
}

2. 在表单提交事件中传入当前表单上下文

修改各个表单的提交处理函数，调用验证时传入当前表单的jQuery对象：

桌面端表单提交事件修改

$('#nueva_normalidad_form').on('submit', function(e){ 
  e.preventDefault(); 
  $('#errorMain').html(''); 
  var formContainer = $('#form_container'); 
  var errorArea = $('#errorMain'); 
  // 传入当前表单$(this)
  if(!validateDocApplication(errorArea, $(this))){ 
    return; 
  } 
  var data = $(this).serialize(); 
  var beforeSend = function () { 
    $('#sendDataButton').attr("disabled", true); 
  }; 
  var error = function (a) { 
    $('#errorMain').html('<div class="alert alert-danger">' + info.txt + '</div>'); 
    return a; 
  }; 
  var success = function(info) { 
    info = $.parseJSON(info); 
    if (info.id === 200) { 
      formContainer.animate({ display: "none" }, { duration: 600, complete: function () { 
        formContainer.css("display", "none"); 
        $('div#successText').css("display", "block"); 
      } }); 
      $('#successText').animate({ display: "block" }, {duration: 700, complete: function () { 
        $('#successText').css("display", "block"); 
      } }); 
      dataLayer.push({'eventcategory': 'Conversion', 'event': 'submitForm'}); 
    } else { 
      $('#errorMain').html('<div class="alert alert-danger">' + error.txt + '</div>'); 
    } 
  }; 
  saveNewNormDoctor(data, beforeSend, success, error); 
});

模态框表单提交事件修改

$('#sendDataNewNorm').on('submit', function (e) { 
  e.preventDefault(); 
  $('#errorModal').html(''); 
  var errorArea = $('#errorModal'); 
  var formContainer = $('#formNewnorm'); 
  var successArea = $('#successTextModal'); 
  // 传入当前表单$(this)
  if(!validateDocApplication(errorArea, $(this))){ 
    return; 
  } 
  var data = $(this).serialize(); 
  var beforeSend = function () { 
    $('#sendDataNewNormButton').attr("disabled", true); 
  }; 
  var error = function (a) { 
    errorArea.html('<div class="alert alert-danger">' + info.txt + '</div>'); 
    return a; 
  }; 
  var success = function (info) { 
    info = $.parseJSON(info); 
    if (info.id === 200) { 
      formContainer.animate({ display: "none" }, { duration: 600, complete: function () { 
        formContainer.css("display", "none"); 
        successArea.css("display", "block"); 
      } }); 
      successArea.animate({ display: "block" }, {duration: 700, complete: function () { 
        successArea.css("display", "block"); 
      } }); 
    } else { 
      errorArea.html('<div class="alert alert-danger">' + info.txt + '</div>'); 
    } 
  }; 
  saveNewNormDoctor(data, beforeSend, success, error); 
});

3. 统一表单字段的name属性（关键！）

检查并确保三个表单的所有对应字段name属性完全一致：

• 桌面端表单的下拉框name需要和模态框的especialidad统一（或者反过来），避免$form.find('select[name="especialidad"]')找不到元素。
• 确保移动端表单的字段name也和另外两个保持一致。

额外检查点 #

• 确认移动端表单的提交事件也使用了上述修改逻辑，传入当前表单上下文。
• 可以在验证函数中临时添加console.log($form.find('input[name="colegiado"]').val())，打印当前表单的字段值，验证是否正确获取到输入内容。

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