Cloud9-RoR-jquery-validation-rails

參考來源(安裝)：https://github.com/meowsus/jquery-validation-rails
參考來源(使用方式)：http://tudip.blogspot.tw/2013/05/jquery-validate-in-rails-applications-by-tudip-technologies.html
doc說明：https://jqueryvalidation.org/validate/

因為我是另外用$.get及jquery-ui的dialog套件相互配合來載入編輯頁面，所以js碼必需寫在被載入的頁面裡，不然其實可以直接寫在coffee檔裡的。

首先，安裝jquery-validation-rails，編輯Gemfile，加上

# validation
gem 'jquery-validation-rails'

執行指令

$ bundle

編輯app/assets/javascripts/application.js檔，加上

//= require jquery.validate
//= require jquery.validate.additional-methods

編輯app/assets/stylesheets/application.css檔，加上

.error {
  color: #FF0000;
}

veiw檔及js的部份，需要套入驗證的text_field記得加上:class => "required"，js的debug如果打開來的話，表單就算全部驗證通過也不會被送出哦！如果已測試完成，記得要把那行註解掉。

<%= form_for @rcalendar, :url => rcalendars_path do |f| %>
  <%= f.hidden_field :v_calendar_id, :value => params[:vid] %>
  <div>
  <%= f.label :fb_nickname, "Facebook姓名" %><span style="color:#FF0000">(必填)</span>
  <%= f.text_field :fb_nickname, :class => "required" %>
  </div>
  <div>
  <%= f.label :fb_urls, "Facebook網址" %><span style="color:#FF0000">(必填)</span>
  <%= f.text_field :fb_urls, size: "57", :class => "required" %>
  </div>
  <div>
  <%= f.label :content, "內容" %>
  <%= f.text_area :content, size: "50x10"  %>
  </div>
  <div>
  <%= f.label :password, "取消預約密碼" %><span style="color:#FF0000">(必填)</span>
  <%= f.password_field :password, :class => "required", autocomplete: "off" %>
  </div> 
  <div>
  <%= f.label :password_confirmation, "確認取消密碼" %><span style="color:#FF0000">(必填)</span>
  <%= f.password_field :password_confirmation, :class => "required", autocomplete: "off" %>
  </div>      
  <%= f.submit "確定" %>
<% end %>

<script type="text/javascript">
$('#new_rcalendar').validate({
  //debug: true,
  rules: {
    'rcalendar[fb_nickname]': {
      required: true
    },
    'rcalendar[fb_urls]': {
      required: true,
      url: true
    },
    'rcalendar[password]': {
      required: true,
      minlength: 5
    },
    'rcalendar[password_confirmation]': {
      required: true,
      minlength: 5,
      equalTo: "#rcalendar_password"
    }
  },
  messages: {
    'rcalendar[fb_nickname]': {
      required: '必須填寫'
    },
    'rcalendar[fb_urls]': {
      required: '必須填寫',
      url: '請輸入有效的網址'
    },
    'rcalendar[password]': {
      required: '必須填寫',
      minlength: '長度不得小於5位數'
    },
    'rcalendar[password_confirmation]': {
      required: '必須填寫',
      minlength: '長度不得小於5位數',
      equalTo: '密碼不符'
    }
  }
});
</script>

測試時欄位如果一開始就為空，保持在空值狀態時是不會秀出錯誤的，除非輸入資料後再清空才會有錯誤的提醒，就這點比較讓我匪夷所思，在此提醒一下大家，免得像我一樣一直鬼打牆。