1

Estou tentando usar uma validação em um formulário que tenho usando Javascript, mas não está dando muito certo, o que estou tentando fazer é isso:

Defini uma div assim:

<style type="text/css">
    .msg-erro{ color: red; }
</style>

No meu input coloquei um <span> dessa forma:

<div class="col-md-12 col-sm-12">
   <label>Empresa *</label>
   <input type="text" id="Empresa" name="Empresa" value="" class="form-control required">
   <span class='msg-erro msg-empresa'></span>
</div>

E no momento da gravação do registro está assim:

// RECUPERA VARIÁVEL DO CAMPO HIDDEN
var IdCandidato = $("#pk").val();
// RESGATANDO VALORES 
var Empresa = $("#Empresa").val();
var Cargo = $("#Cargo").val();
var DataEntrada = $("#DataEntrada").val();
var DataSaida = $("#DataSaida").val();
var UltimoSalario = $("#UltimoSalario").val();
var Atividades = $("#Atividades").val();
var contErro = 0;

/* Validação do campo nome */
MsgEmpresa = document.querySelector('.msg-empresa');
if (Empresa.value == ""){
    MsgEmpresa.innerHTML = "Favor preencher a Empresa";
    MsgEmpresa.style.display = 'block';
    contErro += 1;
} else {
    MsgEmpresa.style.display = 'none';
}   

if(contErro > 0){
    evt.preventDefault();
}   

Mas a mensagem não está sendo exibida e o formulário é submetido.

O layout do formulário está assim:

inserir a descrição da imagem aqui

2
  • Seu feedback é muito importante para pessoas que têm a intenção de ajudar!. Por isso é importante marcar a resposta que te ajudou no teu projecto. Commented 10/05/2019 às 19:00
  • Olá @CristianoGilbertoJoão, valeu pela dica, mas nenhuma das respostas me ajudou no que preciso, mesmo me dando um bom direcionamento. Commented 13/05/2019 às 10:34

3 Respostas 3

1

Geralmente quando estas a desenvolver um Sistema o conveniente é criar um função genérica de validação de formulários.

Tentei criar algo baseiado em jQuery e underscorejs que talvez possa te ajudar:

var passwordValidate = function() {
  let passwordAgain = $('input[type="password"]#passwordAgain').val(),
    password = $('input[type=password]#password').val();

  if ($('input[type=password]#password').attr('data-noHandle') === 'true') {
    return true
  }

  if (password === passwordAgain) {
    return true;
  }

  return false;
};

var submitFormValidate = function(event) {
  var getHtmlError = (msg) => `<span class="wrap-center input-error-span ">${msg}</span>`;
  var notRemoveElemInDOM = ['textarea', 'select', 'input'];
  //Validate email function
  var validateEmail = (email) => {
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
  }

  if (event.type === "submit") {
    //input element
    var elem = $('form textarea[required],form select[required], form input[required]').not('.hidden').not(':hidden').filter(function() {

      if (this.type === 'number') {

        var validaLength = $(this).attr('length'),
          minLength = $(this).attr('min-length'),
          maxLength = $(this).attr('max-length'),
          length = this.value.length;

        if (typeof validaLength !== 'undefined') {
          return length !== parseInt(validaLength);
        } else {

          if ((typeof minLength !== 'undefined') && (typeof maxLength === 'undefined')) {
            return length < parseInt(minLength);
          }

          if ((typeof maxLength !== 'undefined') && (typeof minLength === 'undefined')) {
            return length > parseInt(maxLength);
          }

          if ((typeof maxLength !== 'undefined') && (typeof minLength !== 'undefined')) {
            if (length < minLength) {
              return true;
            } else if (length > maxLength) {
              return true;
            } else {
              return false;
            }
          }

          if ((typeof maxLength === 'undefined') && (typeof minLength === 'undefined')) {
            return this.value == "";
          }
        }
      } else if (this.type === 'email') {
        if (this.value !== "") {
          return !validateEmail($(this).val());
        } else {
          return this.value == "";
        }

      } else if (this.type === 'select-one') {
        if ($(this).val() === null) {
          return true;
        } else {
          return $(this).val() === "";
        }

      }  {
        return this.value == "";
      }

    })[0];

    if ((typeof elem !== 'undefined') && !elem.hidden) {

      //Focus
      if ($(elem).attr('trueType') !== 'date') {
        $(elem).focus();
      }

      elem.scrollIntoView(false);


      //placeholder messages
      var messageValidat = $(elem).attr('messageValidat'),
        oldPlaceholder = $(elem).attr('placeholder');
      var html = getHtmlError(messageValidat || 'Este campo e obrigatorio');
      //DATE

      //SELECT-ONE
      if (elem.type === "select-one" && !elem.hidden) {
        $(html).insertAfter(elem);
        $(elem).addClass('input-error');
      } else
        //Campos vazios
        if ((elem.value === '') && (!$(elem).hasClass('input-error'))) {

          $(elem).attr('placeholder', messageValidat);
          $(elem).addClass('input-error');
          $(html).insertAfter(elem);

        } else
          //Campos nao vazios
          if (elem.value !== '') {
            //Campos de tipo 'email'
            if (elem.type === 'email') {
              if (!validateEmail(elem.value)) {
                $(html).insertAfter(elem);
                $(elem).addClass('input-error');
              } else {
                $(elem).removeClass('input-error');
                if (!(_.contains(notRemoveElemInDOM, $(elem).next().prop("tagName").toLowerCase()))) {
                  $(elem).next().remove();
                }
              }

            }

            //Campos de tipo 'number'
            if (elem.type === 'number') {
              var validaLength = parseInt($(elem).attr('length')),
                length = elem.value.length;

              if (validaLength) {
                if (validaLength !== length) {
                  $(html).insertAfter(elem);
                  $(elem).addClass('input-error');
                } else {
                  $(elem).removeClass('input-error');

                  if (!(_.contains(notRemoveElemInDOM, $(elem).next().prop("tagName").toLowerCase()))) {
                    $(elem).next().remove();
                  }
                }
              } else {
                $(html).insertAfter(elem);
                $(elem).addClass('input-error');
              }

            }


          }


      //OTHER
      $(elem).on('keydown', function(e) {
        if ($(elem).hasClass('input-error')) {

          var tagName = $(elem).next().prop("tagName");
          if (tagName) {
            if (!(_.contains(notRemoveElemInDOM, tagName.toLowerCase()))) {
              $(elem).next().remove();
            }
          } else {
            $(elem).next().remove();
          }

          $(elem).attr('placeholder', oldPlaceholder);
          $(elem).removeClass('input-error');
        }
      });

      //SELECT-ONE
      $(elem).on('change', function(e) {
        if ($(elem).hasClass('input-error')) {
          $(elem).removeClass('input-error');
        }
      });

      //Date
      $(elem).on('focus', function(e) {
        if ($(elem).hasClass('input-error')) {

          if (!(_.contains(notRemoveElemInDOM, $(elem).next().prop("tagName").toLowerCase()))) {
            $(elem).next().remove();
          }

          $(elem).removeClass('input-error');
        }
      });

      return false;
    }

  }

  return passwordValidate();
};



window.onload = () => {
  document.getElementById("registoUtilizador").addEventListener("submit", myFunction);

  function myFunction(event) {
    event.preventDefault();
    // Validar o form
    if (submitFormValidate(event)) {
      alert('Validou com sucesso')
    }
  }
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://underscorejs.org/underscore.js"></script>

<form class="" id="registoUtilizador" novalidate="novalidate" method="post" style="">
  <div id="primeiroNome">
    <input type="text" messagevalidat="Primeiro nome obrigatório" id="primeiroNome" name="primeiroNome" placeholder="Primeiro Nome" required="">
  </div>
  <div class="">
    <input type="email" id="email" messagevalidat="E-mail obrigatório" name="email" value="" placeholder="E-mail" required="">
  </div>
  <div>
    <input type="number" id="cel" min-length="8" max-length="9" messagevalidat="número do celular obrigatório" name="cel" value="" placeholder="Celular">
  </div>
  <div>
    <select id="genre" name="genre" required="required">
      <option disabled="" selected="">Sexo</option>
      <option value="M">Masculino</option>
      <option value="F">Feminino</option>
    </select>
  </div>
  <div>
    <input type="password" name="password" id="password" value="" placeholder="Palavra-Passe" required="">
  </div>
  <div>
    <input type="password" name="passwordAgain" passwordagain="passwordAgain" id="passwordAgain" value="" placeholder="Confirmar Palavra-passe" required="">
  </div>
  <div>
    <button id="button" type="submit" class="">
      Enviar
    </button>
  </div>
</form>

  • A composição do HTML:

O atributo requered indica os inputs que serão validados.

messagevalidat: Messagem do erro;

min-length: Número minimo de caracteres;

max-length: Número máximo de caracteres;

length: Número de caracteres;

O resto é uma questão de css.

1

Para fazer essa validação com jQuery eu faço da seguinte forma: No HTML eu crio uma tag com a mensagem de erro, coloco display none pelo jquery mesmo e valido quando for submeter o formulário, em um variável eu coloco valor false para iniciar e caso ele entre em alguma validação que esteja errado ela vira true, e só cadastra caso ela esteja false, segue abaixo um exemplo.

HTML:

<input id="exemplo" name="exemplo">
<span class='msg-de-erro'>Selecione o campo</span>

jQuery:

var focus = false;
$('.msg-de-erro').css({'display': 'none'});

 $('#btn_enviar').click(function () {
        var envioAjax = false;
        //Validar campos do formulário
        if ('' == $('#exemplo').val()) {
            $('#exemplo').css({'border-color': 'red'});
            $('#exemplo').parent().find('.msg-de-erro').css({'display': 'block'});
            if (!focus) {
                jQuery('#exemplo').focus();
                focus = true;
            }
        } else {
            $('#exemplo').css({'border': '1px solid #ced4da'});
            $('#exemplo').parent().find('.msg-de-erro').css({'display': 'none'});
            focus = false;
        }
        if (!focus) {
            var exemplo = $('#exemplo').val();

            $.ajax({
                type: 'POST',
                url: url,
                data: exemplo,
                success: function (data) {                        
                },
                error: function (data) {
                    console.log('não cadastrou ');
                }
            })
        }
    });

Para complementar por exemplo deu a mensagem de erro mas se o usuário for digitar novamente a mensagem de erro não some então faço o seguinte.

jQuery

$('#exemplo').change(function () {
    $('#exemplo').css({'border': '1px solid #ced4da'});
    $('#exemplo').parent().find('.msg-de-erro').css({'display': 'none'});
});
1

Não precisa de JS para fazer validação de formulário, um bom HTML e CSS é suficiente

Vou deixar apenas um exemplo para usar de base

body, form {
  width: 100vw;
  height: 100vh;
  margin: 0;
}
form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

input {
  margin-top: 16px;
  border: none;
  border-bottom: 1px solid black;
}
input:invalid {
  border-bottom-color: red;
}
input + .error {
  display: block;
  visibility: hidden;
  opacity: 0;
  position: relative;
  height: 14px;
  font-size: 14px;
  color: red;
  transition: opacity 1s linear;
}
input:invalid + .error {
  visibility: visible;
  opacity: 1;
}
<form>
  <div>
    <input type="text" placeholder="Nome" minlength="5" maxlength="50" patter="^[a-zA-Z]+(([',. -][a-zA-Z ])?[a-zA-Z]*)*$" required>
    <span class="error">Entre 5 e 50 caracteres</span>
  </div>

  <div>
    <input type="email" placeholder="Email" required>
    <span class="error">Email inválido</span>
  </div>
</form>

Coloquei uma div apenas por organiação, para encapsular o campo e o texto de erro. Sendo o texto mostrando quando o input contém algum erro. Você pode usar os atributos de validação (minlength, maxlength, required, pattern entre outros), mas observe que apenas setando o tipo do input já possui uma validação, como no exemplo, o tipo email

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .