确认框取决于输入值

Question

我对 javascript 很陌生，所以不要硬评（任何建议或 cmets 将不胜感激）。

我的 rails 应用程序中有一个表单（haml 文件）：

= simple_form_for(@book, remote: true) do |f|
  .row
  .form-group
    = f.input :book_title, as: :string, label: "Title of a book"
    %br
    = f.input :pages_number, as: :string, label: "Number of pages"
    %br
  .form-actions
    = f.button :submit, "Create", class: "btn btn-success"
    = link_to t('buttons.cancel'), '#', onclick: "$.modal.close()", class: 'btn btn-warning pull-right'

控制器中打开表单的动作：

  def new
    @book = Book.new
  end

控制器中保存表单的动作：

  def create
  end

我要做的是检查输入的页数是否大于10。我想创建一个确认框。

我试图将@pages_number = params[:pages_number] 保存在create 操作中，并在视图中使用data: (@pages_number < 10 ? { confirm: "Are you sure?" } : nil)，但它不起作用。

在这种情况下我需要使用 Javascript 吗？

Answer 1

永远记住Ruby = Server; Javascript = Client

---

如果您根据 服务器 设置的条件进行评估，您的代码将可以工作。

但是，由于您正在根据动态创建的条件进行评估，因此您需要使用 javascript 来确定该值是否值得调用确认对话框：

#app/assets/javascripts/application.js
$(document).on("ajax:beforeSend", "#form", function(event, xhr, settings) {
   var $el    = $(this);
   var $pages = $el.find("input[name='page_numbers']");
   if ($pages.val() > 10) {
      var response = confirm($el.data('confirm') || 'Are you sure?'); // not sure if this will pull the rails confirm
      if (!response) { return; }
   }
});

上述内容虽然需要调整，但应将输入的值评估到page_numbers 框中。如果用户不确认，它将返回，从而阻止进度。

当您使用ajax 时，您可以在将请求发送到ajax 驱动程序之前使用ajax:beforeSend 挂钩插入。如果您没有使用 remote: true，则需要查看与 form.on("submit" 方法的绑定。

---

更新

经过长时间的聊天讨论，我们最终解决了以下问题：

#app/assets/javascripts/application.js
function validateForm() { 
var x = $('.value').val(); 
  if (x < 10) { 
    var res = confirm("Are you sure?"); 
    if (res == false) { return false; } 
  } 
}

#app/views/books/new.html.erb
<%= form_for @book, onclick: "return validateForm();", remote: true do |f| %>

我们还使用了this reference。

Answer 2

对于Rails表单，在定义输入数值字段时，我们可以设置该字段可以接受的数值范围。

:min - 可接受的最小值。 :max - 可接受的最大值。

以上属性可用于rails中的数值输入字段，控制取值范围。

相当于

<input id="quantity" name="quantity" max="9" type="number" />