时间戳

首页 > 解决方案 > Parsley-rails 表单未提交 rails 5. 适用于其他表单

ruby-on-rails - Parsley-rails 表单未提交 rails 5. 适用于其他表单

问题描述

我正在尝试在我的 rails 应用程序中的某些表单上使用 parsley-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 .

我的应用程序.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 检查器中没有显示任何内容。提交按钮不起作用。

标签： ruby-on-railsruby-on-rails-5parsley.js

解决方案

显然，Trix 正在对禁用的输入触发欧芹验证。请参阅此 Trix 问题。解决方案是将 'data-parsley-excluded="[disabled]" 添加到您的表单中，如下所示：

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

推荐阅读