如何在Rails的simple_form中无需提交即可获取输入值？

Rails作为后端框架无法直接在不提交表单的情况下获取前端输入值，必须结合前端JavaScript（可使用jQuery或原生JS）监听输入事件，实时获取值并处理判断逻辑。以下是具体实现方案：

一、前端本地实时判断（无需后端交互） #

如果仅需在前端做条件校验（比如格式检查、实时提示），直接监听输入框的input或change事件即可。

用jQuery实现 #

先确保项目已引入jQuery（未引入的话，在app/assets/javascripts/application.js中添加//= require jquery）。在表单所在页面或对应JS文件中添加代码：

$(document).ready(function() {
  // 监听用户名输入事件
  $('#user_username').on('input', function() {
    const username = $(this).val();
    // 自定义条件判断逻辑
    if (username.length < 3) {
      $('.hint_class').text('用户名长度不能少于3位');
    } else {
      $('.hint_class').text('用户名格式符合要求');
    }
  });

  // 监听年龄输入事件
  $('#user_age').on('input', function() {
    const age = parseInt($(this).val());
    // 自定义条件判断逻辑
    if (isNaN(age) || age < 18) {
      $(this).next('.hint').text('必须输入大于等于18的数字');
    } else {
      $(this).next('.hint').text('年龄符合要求');
    }
  });
});

注：输入框ID由Rails自动生成，格式为模型名_字段名（如user_username），可通过浏览器开发者工具查看页面源码确认。

用原生JavaScript实现 #

无需依赖jQuery的话，原生JS也能实现相同效果：

document.addEventListener('DOMContentLoaded', function() {
  const usernameInput = document.getElementById('user_username');
  const ageInput = document.getElementById('user_age');

  usernameInput.addEventListener('input', function() {
    const username = this.value;
    const hintElement = document.querySelector('.hint_class');
    if (username.length < 3) {
      hintElement.textContent = '用户名长度不能少于3位';
    } else {
      hintElement.textContent = '用户名格式符合要求';
    }
  });

  ageInput.addEventListener('input', function() {
    const age = parseInt(this.value);
    const hintElement = this.nextElementSibling;
    if (isNaN(age) || age < 18) {
      hintElement.textContent = '必须输入大于等于18的数字';
    } else {
      hintElement.textContent = '年龄符合要求';
    }
  });
});

二、实时将值发送到后端处理（AJAX） #

如果需要把输入值传给Rails后端做复杂判断（比如检查用户名是否已存在），可通过AJAX请求实现：

1. 配置后端路由 #

在config/routes.rb中添加路由：

post '/users/check_input', to: 'users#check_input'

2. 编写后端控制器方法 #

在app/controllers/users_controller.rb中添加处理逻辑：

def check_input
  username = params[:username]
  age = params[:age]

  # 自定义后端条件判断逻辑
  username_valid = username.present? && username.length >= 3
  age_valid = age.present? && age.to_i >= 18

  render json: { username_valid: username_valid, age_valid: age_valid }
end

3. 前端AJAX请求（jQuery示例） #

$(document).ready(function() {
  $('#user_username, #user_age').on('input', function() {
    const username = $('#user_username').val();
    const age = $('#user_age').val();

    $.ajax({
      url: '/users/check_input',
      method: 'POST',
      data: { username: username, age: age },
      dataType: 'json',
      success: function(response) {
        // 根据后端返回结果更新前端提示
        $('.hint_class').text(response.username_valid ? '用户名可用' : '用户名不符合要求');
        $('#user_age').next('.hint').text(response.age_valid ? '年龄符合要求' : '年龄不符合要求');
      }
    });
  });
});

注意事项 #

• 输入框的ID、类名需与页面实际生成的一致，可通过浏览器开发者工具确认。
• 若使用Rails 7默认的Turbo，需将事件绑定触发时机改为turbo:load，替换DOMContentLoaded或$(document).ready。

内容的提问来源于stack exchange，提问作者Samuel D.