使用JavaScript驗證使用form_tag的輸入字段時，提交按鈕停止在rails中工作

Question

我正在視圖頁面上進行驗證，因為我沒有將其存儲在數據庫中。 因此，我不能為此使用模型驗證。 我不得不使用JavaScript來檢查驗證，以確保用戶沒有提交錯誤的值或提交必需的空字段。 這確實可以防止用戶提交錯誤的輸入，但是在彈出錯誤警報框后，由於某種原因它會禁用“提交”按鈕，並且用戶無法修復其錯誤並嘗試再次提交。

feedback.html.erb

<script>
  function validateForm() {

    if (document.forms["myForm"]["name"].value == null || document.forms["myForm"]["name"].value == "") {
      alert("Name must be filled out");
      return false;
    }
    if (document.forms["myForm"]["message"].value == null || document.forms["myForm"]["message"].value == "") {
      alert("Message must be filled out");
      return false;
    }
    var x = document.forms["myForm"]["email"].value;
    var atpos = x.indexOf("@");
    var dotpos = x.lastIndexOf(".");
    if (atpos < 1 || dotpos < atpos+2 || dotpos+2 >= x.length) {
      alert("Not a valid e-mail address");
      return false;
    }
  }
</script>
<div class="container">
  <div class="container-content">
    <%= form_tag send_feedback_forms_path, name:'myForm', onsubmit:'return validateForm()' do %>
        <%= label_tag 'name', 'Name:', class: 'control-label' %>
        <%= text_field_tag 'name', nil, placeholder: 'Enter Your Name', class:'form-control' %>
        <%= label_tag 'text', 'Email:', class: 'control-label'%>
        <%= email_field_tag 'email', nil, placeholder: 'Enter Your Email', class:'form-control' %>
        <%= label_tag 'phone', 'Phone:', class: 'control-label'%> <span style="font-size: small; color: red">(optional*)</span>
        <%= phone_field_tag 'phone', nil, placeholder: 'Enter Your Phone Number', class:'form-control' %>
        <%= label_tag 'message', 'Message:', class: 'control-label' %>
        <%= text_area_tag 'message', nil, placeholder: 'Enter Your Message', class:'form-control' %><br>
        <%= submit_tag 'Submit', class: 'btn-primary' %>
    <% end %>
  </div>
</div>

Answer 1

您使用javascript的全部原因是基於您不能使用Models的前提，因為Models不能持久化到數據庫中，因此我不得不為您提供Rails替代方案。 您要做的是設置一個“表單模型”。 這使您可以使用所有Rails魔術，而無需表支持的任何數據。 所需要做的就是創建一個類，添加一些虛擬屬性，然后包括一些Rails模塊，您就可以開始了。 下面的例子：

#app/models/new_user.rb
class NewUser
  include ActiveModel::Model  #This gives you validations and all the rails magic a standard table backed model would
  attr_accessor :email   #This gives you read&write methods for your virtual attribute
  attr_accessor :username

  validates :username, :email, presence: true  #standard rails validations

  def initialize(params={})
      self.username = params[:username]
      self.email = params[:email]
  end
end

現在，在您的控制器中，您需要實例化視圖的對象：

    def new
       @new_user = NewUser.new
    end

然后，在表單提交的操作中，由於您不保留任何數據，因此只需要檢查其是否有效即可：

def create
  @new_user = NewUser.new(email: params[new_user][:email], username: params[:new_user][:username])
  if @new_user.valid?
           #passed validation so do whatever
  else
     #flash some errors etc
  end
end

隨着您繼續開發更大的Rails應用程序。 您會注意到，一個模型可能必須在不同的頁面上處理許多不同的形式，而所有這些形式都需要不同的數據量。 在這一點上，為一個模型處理所有許多不同形式的所有驗證就變成了災難。 上面的方法將使您可以逐個表單地組織代碼，而不受限制。