How do I add jquery validation on an ajax form that searches for the value in the database using Ruby on rails?

Question

So I've recently implemented a phone/sim checker. The first form input requires the user to input their phone number. If the phone number exists in the database, render the phone number found message, otherwise replace the phone number form with the sim number form. Again if the sim number exists in the database, render the sim number found message, otherwise render the sim number not found message.

Is anybody able to show me an example on how I can use jquery validation on the user's input before the checkphone / checksim method is fired when the users clicks submit? Validations have been setup in my phone model (phone.rb)

Code below: 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'

Would be greatly appreciated if someone could show me how I can apply jquery validation according to my model validation rules before checkphone and checksim methods fires. Thanks!

Answer 1

Adding minlength, maxlength and required should do the trick. Then the sim partial will look thus:

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'也会将服务器端验证也用于客户端。