[英]How do I add jquery validation on an ajax form that searches for the value in the database using Ruby on rails?
因此,我最近實現了電話/ SIM卡檢查器。 第一個表單輸入要求用戶輸入他們的電話號碼。 如果數據庫中存在電話號碼,則呈現“找到電話號碼”消息,否則將電話號碼表單替換為sim號碼表單。 同樣,如果數據庫中存在SIM卡號,則顯示“找到SIM卡號”消息,否則,顯示“ SIM卡未找到”消息。
有誰能向我展示一個示例,說明如何在用戶單擊提交時觸發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
應用程序/模型/ 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
應用程序/視圖/手機/ 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 %>
應用程序/視圖/手機/電話found.js.erb
$('#phone-number-found').html('Phone Number Found!');
$('#phone-number-not-found').html('');
$('#error').html('');
$('#phone-number-form').hide();
應用程序/視圖/電話/手機 - 不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();
應用程序/視圖/手機/ _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 %>
應用程序/視圖/手機/ SIM-found.js.erb
$('#phone-number-found').html('Sim Found')
$('#phone-number-not-found').html('');
$('#phone-number-error').html('');
應用程序/視圖/手機/ SIM - 不found.js.erb
$('#phone-number-found').html('');
$('#phone-number-not-found').html('Sim Number Not Found!');
$('#error').html('');
應用程序/視圖/手機/ errors.js.erb
$('#phone-number-found').html('');
$('#phone-number-not-found').html('');
$('#error').html('Error!');
配置/ routes.rb中
post "/checkphone" => "phones#checkphone"
post "/checksim" => "phones#checksim"
resources :phones, path: '4g-promo'
如果有人可以向我展示如何在checkphone和checksim方法觸發之前根據我的模型驗證規則應用jquery驗證,將不勝感激。 謝謝!
添加minlength,maxlength和required應該可以解決問題。 然后,sim局部將如下所示:
應用程序/視圖/手機/ _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 %>
用戶gem'client_side_validations'也會將服務器端驗證也用於客戶端。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.