Parsley-rails表单不提交rails 5.在其他表单上工作

时间:2019-06-07 23:07:14

标签: ruby-on-rails ruby-on-rails-5 parsley.js

我正在尝试在Rails应用程序中的某些表格上使用欧芹-rails验证。问题在于它在某些表单上可以完美运行,而在其他表单上不能提交。

我尝试为所有表单元素添加required true。我还使用了“ data-parsley-validate” => true,“ data-parsley-validate” =>“”的不同变体。似乎没有任何作用。这是有效的表单代码。

= simple_form_for(([@place, @place.reviews.build]), html: {"data-parsley-validate" => true}) do |f|
 %p= "Please rate your experience"
  .rating-form
  %hr
  = f.input :comment, input_html: {maxlength: 1000, rows: 10}, label: "Please describe your experience at the location", hint: "Enter a brief description of your experience", error: "You must provide a description for this review.", required: true
  %hr
  = f.submit "Review this place", :class => "btn btn-primary btn-large"



:javascript
  $('.rating-form').raty({
    path: '/assets',
    scoreName: 'review[rating]'
  });

但是,我无法在验证后提交此表单:

= simple_form_for(@place, html: {class: "form-group", "data-parsley-validate" => true}) do |f|

 = f.error_notification
  .form-inputs
    = f.input :name, label: "Please enter the name of your place", hint: "eg. Papa Chris's Pizza.", required: true
    = f.label :Select_a_category
    %br
    = f.collection_select :category_id, Category.all, :id, :name, prompt: "Please choose a category", required: true
    %br
    = f.input :short_description, label: "Please enter a short description of your place", hint: "eg. Papa Chris's Pizza.", required: true
    = f.input :description, as: :trix_editor, input_html: {maxlength: 1000, rows: 10}, label: "Please describe your place", hint: "Enter a brief description of your place", required: true
    = f.attachment_field :place_images_files, direct: true, multiple: true
    = f.simple_fields_for :locations do |location|
      = location.input :address, label: "Please enter the address of your place", hint: "eg. Lumumba Drive", required: true
      = location.input :city, label: "Please enter the city of your promotion", hint: "eg. Tema", required: true
    = f.input :phone, label: "Please enter your phone number", hint: "eg. 030 412 3123", :input_html => { :maxlength => 10, :"data-mask" => "999 999 9999" }, required: true
    = f.input :mobile_number,label: "Please enter your mobile number", hint: "eg. 020 111 2222", :input_html => { :maxlength => 10, :"data-mask" => "999 999 9999" }, required: true
    = f.input :website,label: "Please enter your website", hint: "eg. papajohns.com"
  .form-actions
    = f.button :submit, class: "btn btn-large btn-primary"

这是我的application.js文件:

//= require rails-ujs
//= require jquery3
//= require jquery-ui
//= require ./jquery.raty.js
//= require jquery.timepicker.js
//= require jquery-mask-plugin
//= require jquery.slick
//= require parsley
//= require refile
//= require trix
//= require popper
//= require bootstrap-sprockets
//= require leaflet
//= require dropzone
//= require underscore
//= require masonry/jquery.masonry
//= require_tree .

我的application.css

 *= require leaflet
 *= require 'masonry/transitions'
 *= require_tree
 *= require_self
 *= require trix
 *= require jquery-ui
 *= require jquery.timepicker.css
 *= require dropzone/dropzone
 *= require parsley
 */

控制台和Web检查器中没有任何显示。提交按钮将无法使用。

1 个答案:

答案 0 :(得分:0)

显然,Trix在禁用的输入上触发了欧芹验证。参见this Trix issue。解决方法是添加 'data-parsley-excluded =“ [已禁用]” 变成您的表单,就像这样:

<form data-parsley-validate data-parsley-excluded="[disabled]">
  <trix-editor></trix-editor>
  <input type="submit">
</form>