使用jQuery与SocketIO同时关联双事件：实现提示消息显示与按钮禁用

首先得提个小细节：你的提交按钮id写了#submit-form-button，这是错误的——HTML的id属性值里不需要加#，应该改成：

<button class="ui fluid teal button" id="submit-form-button" type="submit" style="margin-top: 1rem"> Submit </button>

不然jQuery的选择器会找不到这个按钮哦。

接下来根据你想实现的“关联两个事件”的核心需求，我分两种常见场景给出具体实现：

场景1：SocketIO后端事件触发时，同步控制警告框和按钮状态 #

这种场景适合实时验证（比如后端主动通知你网络名称不合法、被占用等），当SocketIO收到后端的验证结果时，自动更新警告框的显示/隐藏，以及提交按钮的可用状态：

// 先初始化SocketIO连接
const socket = io();

// 监听后端发来的网络名称验证结果事件
socket.on('network-validation-result', (data) => {
  const $warning = $('#networkNameWarning');
  const $submitBtn = $('#submit-form-button');

  if (data.isValid) {
    // 验证通过：隐藏警告，启用提交按钮
    $warning.hide();
    $submitBtn.prop('disabled', false).removeClass('disabled');
  } else {
    // 验证失败：显示警告并更新文本，禁用提交按钮
    $warning.text(data.errorText).show();
    $submitBtn.prop('disabled', true).addClass('disabled');
  }
});

场景2：点击提交按钮时，通过SocketIO验证并关联警告框状态 #

这种场景适合用户主动提交时触发验证，先通过SocketIO请求后端验证网络名称，再根据结果决定是否提交表单，同时更新警告框：

const socket = io();
const $warning = $('#networkNameWarning');
const $submitBtn = $('#submit-form-button');

// 监听提交按钮的点击事件
$submitBtn.on('click', (e) => {
  e.preventDefault(); // 先阻止默认表单提交，等验证结果

  // 假设你的网络名称输入框id是networkNameInput
  const networkName = $('#networkNameInput').val().trim();

  // 通过SocketIO发送验证请求，带上回调获取结果
  socket.emit('check-network-name', networkName, (response) => {
    if (response.isValid) {
      // 验证通过：隐藏警告，执行表单提交逻辑
      $warning.hide();
      $('form').submit(); // 这里触发真正的表单提交
    } else {
      // 验证失败：显示警告，提示错误信息
      $warning.text(response.errorMsg).show();
    }
  });
});

// 可选：监听后端实时推送的名称占用通知（比如其他用户刚用了这个名称）
socket.on('network-name-taken', () => {
  $warning.text('这个网络名称已经被占用啦！').show();
  $submitBtn.prop('disabled', true).addClass('disabled');
});

额外的初始化处理 #

如果你的警告框初始状态是显示的，记得在页面加载时同步设置按钮的禁用状态：

$(document).ready(() => {
  const $warning = $('#networkNameWarning');
  const $submitBtn = $('#submit-form-button');

  if ($warning.is(':visible')) {
    $submitBtn.prop('disabled', true).addClass('disabled');
  }
});

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