Как добавить проверку в контактную форму?

ProgramBox

Как добавить проверку в контактную форму?

Post author:admin
Запись опубликована:7 апреля, 2023
Post category:Вопросы по программированию

#ruby-on-rails #validation

#ruby-on-rails #проверка

Вопрос:

Я пытаюсь добавить контактную форму для заполнения пользователями, и она автоматически отправится по электронной почте в основную учетную запись. Я не уверен, как я могу добавить проверку в форму, чтобы пользователи не могли нажать «Отправить электронное письмо» без заполнения полей.

В настоящее время я пытался добавить Website: <input type="url" name="website" required>

приложение / просмотры /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>

В настоящее время электронное письмо по-прежнему отправляется на учетную запись без какой-либо проверки, такой как «Вы должны заполнить это поле»

Ответ №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 с данными формы и вызовите метод predicate 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

1. OP запросил решение для предотвращения отправки формы, а не для обхода и проверки на стороне сервера

2. Хотя добавление required атрибута является отличным, проверка ДОЛЖНА выполняться на стороне сервера, чтобы предотвратить вмешательство. Выполнение проверки как на стороне клиента, так и на стороне сервера — это именно то, что я бы сделал.

3. я полностью согласен, я просто заявляю, что это не то, о чем просил OP

4. Из любопытства, какой именно вид вмешательства предотвращает проверка на стороне сервера? И ContactEmail это не модель rails, не так ли? Похоже, что это PORO.

5. Я могу проверить элемент ввода, просмотреть его в инструментах разработчика и удалить required атрибут из DOM. Он отправит, без проблем. Использование required атрибута на входе — это хороший UX, но на него не следует полагаться. И да, это обычный старый объект ruby, но строка include ActiveModel::Model предоставляет ему методы, которые я обсуждал.

Ответ №2:

Не могли бы вы использовать атрибуты HTML-формы? Существует обязательный атрибут, поэтому пользователь не может оставить поле пустым. например,

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

вы также можете использовать тип = «email», и это обеспечит некоторое правильное форматирование.

(https://www.w3schools.com/html/html_form_attributes.asp)

Ответ №3:

Глядя на код вашей формы, я вижу несколько проблем:

у вас есть 2 <form> открытия
я не вижу никаких file входных данных, поэтому вам не нужно enctype="multipart/form-data"

вот пересмотренный код (я удалил первый элемент формы, я скорректировал action вторую форму, я добавил required атрибуты к входным данным и текстовой области, и я обновил тип ввода электронной почты до «email», чтобы убедиться, что вводятся только действительные электронные письма). Добавление 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>