如何在使用 Ruby on rails 搜索数据库中的值的 ajax 表单上添加 jquery 验证？

Question

所以我最近实施了电话/SIM 检查器。第一个表单输入要求用户输入他们的电话号码。如果数据库中存在电话号码，则呈现找到电话号码的消息，否则将电话号码形式替换为 sim 号码形式。再次，如果 sim 号码存在于数据库中，则呈现 sim number found 消息，否则呈现 sim number not found 消息。

在用户单击提交时触发 checkphone / checksim 方法之前，是否有人能够向我展示如何在用户输入上使用 jquery 验证的示例？我的手机型号（phone.rb）中已设置验证

代码如下： app/controllers/phones_controller.rb

class PhonesController < ApplicationController
  def checkphone
    @phone_number = Phone.where(phone_number: params[:phone][:phone_number])
    respond_to do |format|
      if @phone_number.exists?
        format.js {render 'phone-found'}
      elsif @phone_number.blank?
        format.js {render 'phone-not-found'}
      else
        format.js {render 'errors'}
      end
    end
  end

  def checksim
    @sim_number = Phone.where('sim_number = ?', params[:sim][:sim_number])
    respond_to do |format|
      if @sim_number.exists?
        format.js {render 'sim-found'}
      elsif @sim_number.blank?
        format.js {render 'sim-not-found'}
      else
        format.js {render 'errors'}
      end
    end
  end

  private

  def phone_params
    params.require(:phone).permit(
      :phone_number
    )
  end

  def sim_params
    params.require(:sim).permit(
      :sim_number
    )
  end
end

app/models/phone.rb

class Phone < ActiveRecord::Base
  validates :phone_number, length: {minimum: 11, maximum: 11}, allow_blank: false
  validates :sim_number, length: {minimum: 12, maximum: 12}, allow_blank: false
end

app/views/phones/index.html.erb

<div id="phone-number-found"></div>
<div id="phone-number-not-found"></div>
<div id="error"></div>
<%= form_for :phone, :url => url_for(:action => 'checkphone', :controller => 'phones'), remote: true, html: { id: 'phone-number-form'}  do |f| %>
  <%= f.label "Phone Number:" %>
  <%= f.number_field :phone_number %>
  <%= submit_tag("Check") %>
<% end %>

app/views/phones/phone-found.js.erb

$('#phone-number-found').html('Phone Number Found!');
$('#phone-number-not-found').html('');
$('#error').html('');
$('#phone-number-form').hide();

app/views/phones/phone-not-found.js.erb

$('#phone-number-found').append("<%= j render(partial: 'sim') %>")
$('#phone-number-not-found').html('Phone Number Not Found!');
$('#error').html('');
$('#phone-number-form').hide();

app/views/phones/_sim.html.erb

<div id="sim-number-found"></div>
<div id="sim-number-not-found"></div>
<div id="error"></div>
<%= form_for :sim, :url => url_for(:action => 'checksim', :controller => 'phones'), remote: true, html: { id: 'sim-number-form'}  do |f| %>
  <%= f.label "Sim Number:" %>
  <%= f.number_field :sim_number %>
  <%= submit_tag("Check") %>
<% end %>

app/views/phones/sim-found.js.erb

$('#phone-number-found').html('Sim Found')
$('#phone-number-not-found').html('');
$('#phone-number-error').html('');

app/views/phones/sim-not-found.js.erb

$('#phone-number-found').html('');
$('#phone-number-not-found').html('Sim Number Not Found!');
$('#error').html('');

app/views/phones/errors.js.erb

$('#phone-number-found').html('');
$('#phone-number-not-found').html('');
$('#error').html('Error!');

config/routes.rb

post "/checkphone" => "phones#checkphone"
  post "/checksim" => "phones#checksim"

  resources :phones, path: '4g-promo'

如果有人能告诉我如何在 checkphone 和 checksim 方法触发之前根据我的模型验证规则应用 jquery 验证，将不胜感激。谢谢！

Answer 1

添加 minlength、maxlength 和 required 应该可以解决问题。然后 sim 部分将如下所示：

app/views/phones/_sim.html.erb

<div id="sim-number-found"></div>
<div id="sim-number-not-found"></div>
<div id="error"></div>
<%= form_for :sim, :url => url_for(:action => 'checksim', :controller => 'phones'), remote: true, html: { id: 'sim-number-form'}  do |f| %>
  <%= f.label "Sim Number:" %>
  <%= f.number_field :sim_number, minlength: 12, maxlength: 12, required: true %>
  <%= submit_tag("Check") %>
<% end %>

Answer 2

用户 gem 'client_side_validations' 也会将服务器端验证用于客户端。