jQuery添加学生功能：如何阻止默认值为0的部门下拉框提交？

现有基于jQuery的添加学生功能，姓名（inputName）与邮箱（inputEmail）的校验已正常运行，但当部门下拉框（selectDepartment）默认值为0未被修改时，添加按钮（anchAddStudent）仍会提交请求，需要实现此时拒绝提交的逻辑。

原代码 #

$("#anchAddStudent").click(function() {
  var id = $('#last').val();
  console.log(id)
  var name = $('#inputName').val();
  var email = $('#inputEmail').val();
  var department_id = $('#selectDepartment').val();
  let last = $('#last').val()
  var data = {
    'name': $('#inputName').val(),
    'email': $('#inputEmail').val(),
    'department_id': $('#selectDepartment').val()
  }
  console.log(data);

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

  $.ajax({
    type: "POST",
    url: "/students",
    data: data,
    dataType: "json",
    success: function(response) {

      function IsEmail(email) {
        var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        if (!regex.test(email)) {

          return false;
        } else {
          return true;
        }
      }

      if (response.status == 400) {

        if (email.indexOf("@") < 0 || email.indexOf(".") < 0) {
          $("#spanInputEmail").removeClass('hideme');
          $("#inputEmail").addClass('borderColor');
        }

        if (name == "") {
          $("#spanInputName").removeClass('hideme');
          $("#inputName").addClass('borderColor');
        }

        if (department_id == 0) {
          $("#spanSelectDept").removeClass('hideme');
          console.log(department_id);
        }

      } else {

        $('#last').val(parseInt(last) + 1);
        $('#saveform_errList').html("");
        $('#success_message').addClass('alert alert-success');
        $('#success_message').text(response.message);
        $("#inputForm").find('input').val("");

        $("#inputName").val('');
        $("#inputEmail").val('');
        $("#selectDepartment").val('');

        // append row inside the table
        $("table tbody").append(
          `<tr>
                <td class='studentId'>${id}.</td>
                <td class='studentName'>${name}</td>
                <td class='studentEmail'>${email}</td>
                <td class='studentDept'>${response.dept_name}</td>
                <td class='studActions' data-studId='${response.id}' data-name='${name}' data-email='${email}' data-dept='${response.dept_name}' data-deptId='${department_id}' data-studDept='${department_id}'>
                <button type='button' value='${response.id}' data-id='${response.id}' class='btnDeleteStudent btn btn-danger btn-sm float-end'>Delete</button>
                <button type='button' class='btnEditStudent btn btn-primary btn-sm float-end'>Edit</button>
                <button type='button' class='btnCancelEditStudent btn btn-secondary btn-sm float-end hideme'>Cancel</button>
                <button type='button' class='btnUpdateStudent btn btn-primary btn-sm float-end hideme'>Update</button>
                </td>;
            </tr>`
        )
      }
    }
  });
});

解决方案 #

1. 前置校验阻止无效提交 #

在发送AJAX请求之前添加前端校验逻辑：

• 使用===严格相等运算符判断department_id是否为'0'（下拉框val()方法返回字符串类型，用严格相等可避免类型隐式转换问题）
• 如果选中默认值，先显示部门选择的错误提示，再通过return终止函数执行，直接阻止后续AJAX请求发送

2. 重置错误状态 #

每次点击按钮时先重置所有输入框的错误提示样式和状态，避免上次校验的错误状态残留。

修改后的完整代码 #

$("#anchAddStudent").click(function() {
  // 先重置所有错误提示
  $("#spanInputEmail").addClass('hideme');
  $("#inputEmail").removeClass('borderColor');
  $("#spanInputName").addClass('hideme');
  $("#inputName").removeClass('borderColor');
  $("#spanSelectDept").addClass('hideme');

  var id = $('#last').val();
  var name = $('#inputName').val().trim();
  var email = $('#inputEmail').val().trim();
  var department_id = $('#selectDepartment').val();
  let last = $('#last').val()
  var data = {
    'name': name,
    'email': email,
    'department_id': department_id
  }
  console.log(data);

  // 前端前置校验：检查所有必填项
  let isValid = true;
  if (name === "") {
    $("#spanInputName").removeClass('hideme');
    $("#inputName").addClass('borderColor');
    isValid = false;
  }
  // 复用已有的邮箱校验函数
  function IsEmail(email) {
    var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    return regex.test(email);
  }
  if (!IsEmail(email)) {
    $("#spanInputEmail").removeClass('hideme');
    $("#inputEmail").addClass('borderColor');
    isValid = false;
  }
  // 检查部门是否选择有效选项
  if (department_id === '0') {
    $("#spanSelectDept").removeClass('hideme');
    isValid = false;
  }

  // 校验不通过则终止提交流程
  if (!isValid) {
    return;
  }

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

  $.ajax({
    type: "POST",
    url: "/students",
    data: data,
    dataType: "json",
    success: function(response) {
      if (response.status == 400) {
        // 后端返回错误时，重新显示对应提示
        if (!IsEmail(email)) {
          $("#spanInputEmail").removeClass('hideme');
          $("#inputEmail").addClass('borderColor');
        }
        if (name == "") {
          $("#spanInputName").removeClass('hideme');
          $("#inputName").addClass('borderColor');
        }
        if (department_id == '0') {
          $("#spanSelectDept").removeClass('hideme');
        }
      } else {
        $('#last').val(parseInt(last) + 1);
        $('#saveform_errList').html("");
        $('#success_message').addClass('alert alert-success');
        $('#success_message').text(response.message);
        
        // 重置表单输入
        $("#inputName").val('');
        $("#inputEmail").val('');
        $("#selectDepartment").val('');

        // 追加新行到表格
        $("table tbody").append(
          `<tr>
                <td class='studentId'>${id}.</td>
                <td class='studentName'>${name}</td>
                <td class='studentEmail'>${email}</td>
                <td class='studentDept'>${response.dept_name}</td>
                <td class='studActions' data-studId='${response.id}' data-name='${name}' data-email='${email}' data-dept='${response.dept_name}' data-deptId='${department_id}' data-studDept='${department_id}'>
                <button type='button' value='${response.id}' data-id='${response.id}' class='btnDeleteStudent btn btn-danger btn-sm float-end'>Delete</button>
                <button type='button' class='btnEditStudent btn btn-primary btn-sm float-end'>Edit</button>
                <button type='button' class='btnCancelEditStudent btn btn-secondary btn-sm float-end hideme'>Cancel</button>
                <button type='button' class='btnUpdateStudent btn btn-primary btn-sm float-end hideme'>Update</button>
                </td>
            </tr>`
        )
      }
    }
  });
});

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