Estoy teniendo un problemas Este sitio con el Form no me muestra el mensaje de envió debajo del boton.
La idea es que cuando no se completen los campos y des en enviar aparezca un mensaje y cuando este completo y envíes el form aparezca otro.
Arme el siguiente codigo:
$("#btnSubmit").on("click", function(e){
var errorMessage = $(".errorMessage");
var validMessage = $(".validMessage");
var hasError = false;
var hasvalid = true;
$(".inputValidation").each(function(){
var $this = $(this);
if($this.val() == ""){
hasError = true;
$this.addClass("inputError");
errorMessage.html("<p>Por favor, complete los siguientes campos.</p>");
e.preventDefault();
}if($this.val() != ""){
$this.removeClass("inputError");
}else{
return true; alert(1);
}
}); //Input
validMessage.slideDown(700);
$(".inputValidation").each(function(){
var $this = $(this);
if($this.val() == ""){
hasvalid = false;
$this.addClass("inputError");
validMessage.html("<p>Por favor, complete los siguientes campos.</p>");
e.preventDefault();
}if($this.val() != ""){
$this.removeClass("inputError");
}else{
return true; alert(1);
}
}); //Input
validMessage.slideDown(700);
/*ajax*/
if(hasError == false){
Ecommerce = document.getElementById("exampleInputEcommerce").value;
Nombre = document.getElementById("exampleInputNombre").value;
Telefono = document.getElementById("exampleInputPhone").value;
Email = document.getElementById("exampleInputEmail1").value;
data2= {
ecommerce:Ecommerce,
nombre:Nombre,
telefono:Telefono,
email:Email,
tarea: "envio"
};
$.ajax({
type: "POST",
url:"envio.php",
data: data2,
success:function(data){
console.log("entro");
/*$('#respuesta').fadeOut('fast').html(
"Gracias, se a enviado su mensaje"
);*/
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$('.validMessage').fadeOut('fast').html(
"Gracias, se a enviado su mensaje"
);
$(".inputValidation").val("");
}
});
}
}); //Form .submit
.info-section .inputError {
background-color: #9e46578c!important;
border-bottom: 2px solid #824747!important;
color: #fff;
}
.info-section .inputError::-webkit-input-placeholder {
color: #fff;
}
.info-section .errorMessage {
/*background-color: #d03e3e; */
color: #fff;
clear: right;
display: none;
font-size: 14px;
font-weight: bold;
height: 55px;
letter-spacing: 1px;
-moz-border-radius: 0px 0px 3px 3px;
-webkit-border-radius: 0px 0px 3px 3px;
border-radius: 0px 0px 3px 3px;
margin-top: 21px;
}
.info-section .validMessage {
/*background-color: #d03e3e; */
color: #fff;
clear: right;
display: none;
font-size: 14px;
font-weight: bold;
height: 55px;
letter-spacing: 1px;
-moz-border-radius: 0px 0px 3px 3px;
-webkit-border-radius: 0px 0px 3px 3px;
border-radius: 0px 0px 3px 3px;
margin-top: 21px;
}
.info-section .errorMessage p {
margin: 0px;
padding: 19px 0px 0px 30px;
text-align: left;
}
.info-section .validMessage {
/*background-color: #d03e3e; */
color: #fff;
clear: right;
display: none;
font-size: 14px;
font-weight: bold;
height: 55px;
letter-spacing: 1px;
-moz-border-radius: 0px 0px 3px 3px;
-webkit-border-radius: 0px 0px 3px 3px;
border-radius: 0px 0px 3px 3px;
margin-top: 21px;
}
.info-section .validMessage p {
margin: 0px;
padding: 19px 0px 0px 30px;
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<form class="formValidation px-lg-2">
<div class="form-group">
<input type="name" class="form-control inputValidation" id="exampleInputEcommerce" aria-describedby="Ecommerce" placeholder="Ecommerce">
</div>
<div class="form-group">
<input type="name" class="form-control inputValidation" id="exampleInputNombre" aria-describedby="Nombre" placeholder="Nombre">
</div>
<div class="form-group">
<input type="phone" class="form-control inputValidation" id="exampleInputPhone" aria-describedby="phone" placeholder="Teléfono">
</div>
<div class="form-group mb-5">
<input type="email" class="form-control inputValidation" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Email">
</div>
<button type="button" id="btnSubmit" class="btn btn_enviar_form mt-sm-5">ENVIAR</button>
</form>
<div class="errorMessage"></div>
<div class="validMessage" id="respuesta"></div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>