Tengo un formulario de contacto donde los mensajes de validación de los inputs aparecen correctamente, si no se ha ingresado el campo name, al ingresarlo, el mensaje de error permanece. Y en el campo de validación de email, si se ingresa el email incompleto aparece el mensaje .err_email-1 pero si no se ingresa nada en el campo aparecen los dos errores .err_email-1 y .err_email cómo hacer para que .err_name aparezca sólo cuando el campo está vacío y el .err_email-1 sólo cuando el ingreso es inválido.
function control() {
$('.err_name').hide();
$('.err_email').hide();
$('.err_email-1').hide()
$('.err_sub').hide();
$('.err_mes').hide();
var name = $('#name').val();
var email = $('#email').val();
var subject = $('#subject').val();
var message = $('#message').val();
name = jQuery.trim(name);
email = jQuery.trim(email);
subject = jQuery.trim(subject);
message = jQuery.trim(message);
if(name == "") {
$('.err_name').fadeIn(100);
$('#name').val(name);
}
if(email == "") {
$('.err_email').fadeIn(100);
$('#email').val(email);
}
if(subject == "") {
$('.err_sub').fadeIn(100);
$('#subject').val(subject);
}
if(message == "") {
$('.err_mes').fadeIn(100);
$('#message').val(message);
}
function validateEmail(email) {
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
return emailReg.test( email );
}
if( !validateEmail(email)) {
$('.err_email-1').fadeIn(100);
$('#email').val(email);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="send" id="contactForm" >
<fieldset>
<div class="row">
<div class="form-group">
<div class="col-md-4">
<label for="name">Nombre *
<input type="text" name="name" maxlength="150" class="form-control" id="name" required></label>
<span class="alert alert-danger err_name">*Completar este campo.</span>
</div>
<div class="col-md-4">
<label for="email">E-mail *
<input type="email" name="email" id="email" maxlength="150" class="form-control" required></label>
<span class="alert alert-danger err_email">*Ingresar Email.</span>
<span class="alert alert-danger err_email-1">*El email no válido!</span>
</div>
<div class="col-md-4">
<label for="phone">Teléfono (Opcional)
<input type="tel" id="phone" name="phone" maxlength="50" class="form-control"></label>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-8">
<label for="subject">Asunto *
<input type="text" name="subject" id="subject" maxlength="50" maxlength="200" class="form-control" required></label>
<span class="alert alert-danger err_sub">*Ingrese un asunto.</span>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-12">
<label for="message">Mensaje *</label>
<textarea name="message" id="message" maxlength="800" rows="8" class="form-control" required></textarea>
<span class="alert alert-danger err_mes">*Su Mensaje.</span>
</div>
</div>
</div>
</fieldset>
<div class="row">
<div class="col-md-12">
<a href="javascript:control();" id="btn" class="btn btn-primary"><i class="fa fa-check"></i>ENVIAR</a>
</div>
<hr>
</div>
<div id="info"></div>
</form>
if( !validateEmail(email)) {...}
dentro de unelse
en la comparación del email vacioif(email== "") {...} else if( !validateEmail(email)) {...}
label
cerrando</label>
de mas, a tu JS le faltan 2 llaves de cierre}}
y algún;
, por lo demás he metido tu código en el snippet y no consigo simular el error.