title: How do I add jquery validation on an ajax form that searches for the value in the database using Ruby on rails?
body: <p>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.</p>
  
  <p>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)</p>
  
  <p>Code below:
  app/controllers/phones_controller.rb</p>
  
  <pre><code>class PhonesController &lt; 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
  </code></pre>
  
  <p>app/models/phone.rb</p>
  
  <pre><code>class Phone &lt; 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
  </code></pre>
  
  <p>app/views/phones/index.html.erb</p>
  
  <pre><code>&lt;div id="phone-number-found"&gt;&lt;/div&gt;
  &lt;div id="phone-number-not-found"&gt;&lt;/div&gt;
  &lt;div id="error"&gt;&lt;/div&gt;
  &lt;%= form_for :phone, :url =&gt; url_for(:action =&gt; 'checkphone', :controller =&gt; 'phones'), remote: true, html: { id: 'phone-number-form'}  do |f| %&gt;
    &lt;%= f.label "Phone Number:" %&gt;
    &lt;%= f.number_field :phone_number %&gt;
    &lt;%= submit_tag("Check") %&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p>app/views/phones/phone-found.js.erb</p>
  
  <pre><code>$('#phone-number-found').html('Phone Number Found!');
  $('#phone-number-not-found').html('');
  $('#error').html('');
  $('#phone-number-form').hide();
  </code></pre>
  
  <p>app/views/phones/phone-not-found.js.erb</p>
  
  <pre><code>$('#phone-number-found').append("&lt;%= j render(partial: 'sim') %&gt;")
  $('#phone-number-not-found').html('Phone Number Not Found!');
  $('#error').html('');
  $('#phone-number-form').hide();
  </code></pre>
  
  <p>app/views/phones/_sim.html.erb</p>
  
  <pre><code>&lt;div id="sim-number-found"&gt;&lt;/div&gt;
  &lt;div id="sim-number-not-found"&gt;&lt;/div&gt;
  &lt;div id="error"&gt;&lt;/div&gt;
  &lt;%= form_for :sim, :url =&gt; url_for(:action =&gt; 'checksim', :controller =&gt; 'phones'), remote: true, html: { id: 'sim-number-form'}  do |f| %&gt;
    &lt;%= f.label "Sim Number:" %&gt;
    &lt;%= f.number_field :sim_number %&gt;
    &lt;%= submit_tag("Check") %&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p>app/views/phones/sim-found.js.erb</p>
  
  <pre><code>$('#phone-number-found').html('Sim Found')
  $('#phone-number-not-found').html('');
  $('#phone-number-error').html('');
  </code></pre>
  
  <p>app/views/phones/sim-not-found.js.erb</p>
  
  <pre><code>$('#phone-number-found').html('');
  $('#phone-number-not-found').html('Sim Number Not Found!');
  $('#error').html('');
  </code></pre>
  
  <p>app/views/phones/errors.js.erb</p>
  
  <pre><code>$('#phone-number-found').html('');
  $('#phone-number-not-found').html('');
  $('#error').html('Error!');
  </code></pre>
  
  <p>config/routes.rb</p>
  
  <pre><code>post "/checkphone" =&gt; "phones#checkphone"
    post "/checksim" =&gt; "phones#checksim"
  
    resources :phones, path: '4g-promo'
  </code></pre>
  
  <p>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!</p>