Campos obrigatórios

Detalhes da questão

Endereço do fórum: http://www.cidadesocial.com
Versão do fórum: phpBB2

Descrição

Olá,
Gostaria de deixar os campos obrigatórios de um formulário como nesse https://imgur.com/a/tKT4T.
http://1forum1.forumeiros.com/h1-

Obrigado!

Olá,

O senhor poderia ter facilitado nosso suporte anexando o código de seu formulário aqui.
Pode fazer isso, por gentileza?

o/

Luiz escreveu:Olá,

O senhor poderia ter facilitado nosso suporte anexando o código de seu formulário aqui.
Pode fazer isso, por gentileza?

o/

Desculpe, aqui está

Código:

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<form onsubmit="submit_form();" action="/posting.forum" id="generated_form" method="post" enctype="multipart/form-data">
  <input type="hidden" name="form_mode" value="0">
  <div>
    <p class="tituloform">Nova dica e/ou sugestão</p>
    <p class="descform">Antes de fazer a dica e/ou sugestão, veja se está de acordo com as <a href="/t10-" target="_blank">regras gerais de nosso fórum</a>.</p>
  </div>
  <dl>
      <dt>Seu nome<spam style="color: red">*</spam>:</dt>
      <dd><input type="text" data-type="field" placeholder="Nome_Sobrenome" id="field1" maxlength="71" required></dd>
  </dl>
  <dl>
      <dt>Dica e/ou sugestão? <spam style="color: red">*</spam>:</dt>
      <dd>
        <select data-type="field" id="field2" style="color: #333;" required>
            <option value="">Selecione uma opção...</option>
            <option value="Dica">Dica</option>
            <option value="Sugestão">Sugestão</option>
            <option value="Dica e Sugestão">Dica e Sugestão</option>
        </select>
      </dd>
  </dl>
  <dl>
      <dt>Onde será implantada?<spam style="color: red">*</spam>:</dt>
      <dd>
        <select data-type="field" id="field3" style="color: #333;" required>
            <option value="">Selecione uma opção...</option>
            <option value="Fórum">Fórum</option>
            <option value="Servidor">Servidor</option>
            <option value="Fórum e Servidor">Fórum e Servidor</option>
        </select>
      </dd>
  </dl>
  <dl>
      <dt>Título do tópico<spam style="color: red">*</spam>:</dt>
      <dd><input type="text" data-type="field" placeholder="Fale em poucas palavras sobre o problema" id="field4" maxlength="71" required></dd>
  </dl>
  <dl>
      <dt>Descreva como seria:</dt>
      <dd><textarea data-type="field" placeholder="Descreva a dica e/ou sugestão para melhor entendermos." id="field5"></textarea></dd>
  </dl>
  <dl>
      <dt>Imagens e/ou vídeos do problema<spam style="color: red">*</spam>:</dt>
      <dd><input type="text" data-type="field" placeholder="Envie vídeos e/ou fotos para auxiliar a entendermos melhor." id="field6" maxlength="150" required></dd>
  </dl>
  <input type="hidden" name="f" value="4">
  <input type="hidden" name="subject" value="O script não enviou o título" template="[{field2} - {field3}] {field4} [{field1}]">
  <input type="hidden" name="description" value="O script não enviou a descrição" template="">
  <textarea name="message" style="display:none"></textarea>
  <textarea id="message-template-bbcode-0" style="display:none">[b]Meu nome:[/b] {field1}
[b]Dica e/ou sugestão:[/b] {field2}
[b]Onde será implantada:[/b] {field3}
[b]Título da {field2}:[/b] {field4}
 
[b]Descrição:[/b] {field5}
 
[b]Imagens e/ou vídeos:[/b] {field6}
</textarea>
  <input type="hidden" name="mode" value="newtopic">
  <input type="hidden" name="lt" value="0">
  <center>
      <input type="submit" name="post" class="button posicao" align="center" value="Enviar post">
      <input type="reset" name="limpar" class="button posicao2" align="center" value="Limpar">
  </center>
  <div class="campos_obrigatorios">
      Campos com <spam style="color: red">*</spam> é obrigatório o preenchimento!
  </div>
</form>

Troque por:

Código:

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<form action="/posting.forum" id="generated_form" method="post" enctype="multipart/form-data">
  <style>
    .input-sucess {
      border-color: green;
      border-width: 2px;
    }

    .input-danger {
      border-color: red;
      border-width: 2px;
    }
  </style>
  <input type="hidden" name="form_mode" value="0">
  <div>
    <p class="tituloform">Nova dica e/ou sugestão</p>
    <p class="descform">Antes de fazer a dica e/ou sugestão, veja se está de acordo com as <a href="/t10-" target="_blank">regras gerais de nosso fórum</a>.</p>
  </div>
  <dl>
      <dt>Seu nome<spam style="color: red">*</spam>:</dt>
      <dd><input type="text" data-type="field" placeholder="Nome_Sobrenome" id="field1" maxlength="71" required></dd>
  </dl>
  <dl>
      <dt>Dica e/ou sugestão? <spam style="color: red">*</spam>:</dt>
      <dd>
        <select data-type="field" id="field2" style="color: #333;" required>
            <option value="">Selecione uma opção...</option>
            <option value="Dica">Dica</option>
            <option value="Sugestão">Sugestão</option>
            <option value="Dica e Sugestão">Dica e Sugestão</option>
        </select>
      </dd>
  </dl>
  <dl>
      <dt>Onde será implantada?<spam style="color: red">*</spam>:</dt>
      <dd>
        <select data-type="field" id="field3" style="color: #333;" required>
            <option value="">Selecione uma opção...</option>
            <option value="Fórum">Fórum</option>
            <option value="Servidor">Servidor</option>
            <option value="Fórum e Servidor">Fórum e Servidor</option>
        </select>
      </dd>
  </dl>
  <dl>
      <dt>Título do tópico<spam style="color: red">*</spam>:</dt>
      <dd><input type="text" data-type="field" placeholder="Fale em poucas palavras sobre o problema" id="field4" maxlength="71" required></dd>
  </dl>
  <dl>
      <dt>Descreva como seria:</dt>
      <dd><textarea data-type="field" placeholder="Descreva a dica e/ou sugestão para melhor entendermos." id="field5"></textarea></dd>
  </dl>
  <dl>
      <dt>Imagens e/ou vídeos do problema<spam style="color: red">*</spam>:</dt>
      <dd><input type="text" data-type="field" placeholder="Envie vídeos e/ou fotos para auxiliar a entendermos melhor." id="field6" maxlength="150" required></dd>
  </dl>
  <input type="hidden" name="f" value="4">
  <input type="hidden" name="subject" value="O script não enviou o título" template="[{field2} - {field3}] {field4} [{field1}]">
  <input type="hidden" name="description" value="O script não enviou a descrição" template="">
  <textarea name="message" style="display:none"></textarea>
  <textarea id="message-template-bbcode-0" style="display:none">[b]Meu nome:[/b] {field1}
[b]Dica e/ou sugestão:[/b] {field2}
[b]Onde será implantada:[/b] {field3}
[b]Título da {field2}:[/b] {field4}
 
[b]Descrição:[/b] {field5}
 
[b]Imagens e/ou vídeos:[/b] {field6}
</textarea>
  <input type="hidden" name="mode" value="newtopic">
  <input type="hidden" name="lt" value="0">
  <center>
      <input type="submit" name="post" class="button posicao" align="center" value="Enviar post">
      <input type="reset" name="limpar" class="button posicao2" align="center" value="Limpar">
  </center>
  <div class="campos_obrigatorios">
      Campos com <spam style="color: red">*</spam> é obrigatório o preenchimento!
  </div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
  (function ($) {
    'use strict';

    $(function () {

      $('[required]').each(function () {

        var $this = $(this);
        $this.addClass('on-idle');

        $this.on('focusout', function () {

          if (!$this.val()) {
            $this.removeClass('on-idle');
            $this.addClass('input-danger');
            $this.removeClass('input-sucess');
            return;
          }

          if ($this.val()) {
            $this.removeClass('on-idle');
            $this.addClass('input-sucess');
            $this.removeClass('input-danger');
            return;
          }
        });
      });

      $('form').on('submit', function () {

        if ($('[required]').hasClass('on-idle') || $('[required]').hasClass('input-danger')) {
          $('.on-idle').addClass('input-danger');
          alert('Complete todos os campos!');
          return;
        }

        submit_form();
      });
     
    });
  }(jQuery));
</script>

o/