Question

我正在尝试添加一个联系表供用户填写，它将自动通过电子邮件发送到主帐户。我不确定如何在表单中添加验证，以便用户在未填写字段的情况下无法单击“发送电子邮件”。

我目前已尝试添加Website: <input type="url" name="website" required>

app / views / contact_mailer / contact_email.html.erb：

<!DOCTYPE html>
<html>
  <head>
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
  </head>
  <body>
    <h1>Contact Us Form</h1>
    <p>
      From: <%= @params['name'] %>
    </p>
    <p>
      Email: <%= @params['email'] %>
    </p>
    <p>
      Message: <%= @params['message'] %>
    </p>
  </body>
</html>

联系表格：

<h1>Any enquiries:</h1>
<center><form name="htmlform" method="get" action="/pages/send_form">
<table width="700px">



<form id="contact_form" action="#" method="POST" enctype="multipart/form-data">

  <div class="row">
    <label for="name">Your Name:</label><br />
    <input id="name" class="input" name="name" type="text" value="" size="30" /><br />
  </div>

  <div class="row">
    <label for="email">Your Email:</label><br />
    <input id="email" class="input" name="email" type="text" value="" size="30" /><br />
  </div>

  <div class="row">
    <label for="message">Your Message:</label><br />
    <textarea id="message" class="input" name="message" rows="7" cols="30"></textarea><br />
  </div>
  <input id="submit_button" type="submit" value="Send email" />

</form>

当前，该电子邮件仍会发送到该帐户，而没有任何验证，例如“您必须填写此字段”

Answer 1

为您的联系信息创建模型。像这样：

class ContactEmail
  attr_accessor :name, :email, message
end

然后include ActiveModel::Model获得ActiveModel的验证并告诉模型要验证的字段，例如：

class ContactEmail
  include ActiveModel::Model
  attr_accessor :name, :email, message
  validates :name, :email, message, presence: true
end

最后，在控制器操作中，使用表单数据创建一个新的ContactEmail并调用谓词方法valid?。然后使用flash添加错误消息。

new_mail = ContactEmail.new(params['name'], params['email'], params['message'])
if new_mail.valid?
  ...
else
  flash.now[:error] = new_mail.errors.full_messages
end

Answer 2

您可以使用HTML表单属性吗？有一个必填属性，因此用户不能将字段留空。例如

<input required id="email" class="input" name="email" type="email" value="" size="30"  />

您还可以使用type =“ email”，它将确保某些正确的格式。

（https://www.w3schools.com/html/html_form_attributes.asp）

Answer 3

在查看您的表单代码时，我看到了几个问题：

您有2个<form>职位空缺
我看不到任何file输入，因此您不需要enctype="multipart/form-data"

这是修改后的代码（我删除了第一个表单元素，调整了第二个表单的action，我向输入和textarea添加了required属性，已将电子邮件输入的类型更新为“电子邮件”，以确保仅输入有效的电子邮件）。如果没有正确填写输入内容，添加required将会强制现代浏览器阻止表单提交。

<h1>Any enquiries:</h1>
<center>
<table width="700px">



<form id="contact_form" action="/pages/send_form" method="POST">

  <div class="row">
    <label for="name">Your Name:</label><br />
    <input id="name" class="input" name="name" type="text" value="" size="30" required /><br />
  </div>

  <div class="row">
    <label for="email">Your Email:</label><br />
    <input id="email" class="input" name="email" type="email" value="" size="30" required /><br />
  </div>

  <div class="row">
    <label for="message">Your Message:</label><br />
    <textarea id="message" class="input" name="message" rows="7" cols="30" required></textarea><br />
  </div>
  <input id="submit_button" type="submit" value="Send email" />

</form>

如何向联系表单添加验证？

3 个答案: