Estoy trabajando en la validación de correo electrónico para una página de inicio de sesión usando jQuery. El problema al que me enfrento es que solo se ejecuta la parte else y no la parte if. A continuación se muestra el código.
$(document).ready(function () { $('#my-input').focusout(function () { emailValidate(); }); function emailValidate() { var reg = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; var email = $('#my-input').val(); if (reg.test('email')) { console.log('correct'); $('#my-input').css('border', '2px solid green'); $('#span1').css('display', 'none'); } else { $('#my-input').css('border', '2px solid red'); $('#span1').css('display', 'block'); } } });Debe ser email como variable, no como cadena
var email = $('#my-input').val(); if ( reg.test(email) ) { Aquí hay una pequeña nueva versión con la solución mencionada.
Utiliza una clase CSS para determinar los estilos. JS solo se usa para alternar esa clase de has-error del elemento de etiqueta principal común.
Tampoco utiliza identificaciones. ¡ data-validate es una opción mucho más flexible!
const has = { value: (val) => val.trim().length > 0, email: (val) => /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(val), // add more validators here }; jQuery(function($) { // DOM ready and $ alias inn scope function validate() { const isValid = has[this.dataset.validate](this.value); $(this).closest("label").toggleClass("has-error", !isValid); } $("[data-validate]").on("focusout", validate); }); /*QuickReset*/ *,*::before,*::after{margin:0; box-sizing:border-box;} body {font:16px/1.6 sans-serif;} label { display: flex; align-items: center; gap: 10px; padding: 10px; margin: 5px; border: 2px solid transparent; } label input { flex: 1; } label.has-error { border: 2px solid red; border-image-slice: 1; border-image-source: linear-gradient(to right, red, fuchsia); } label .error { color: red; display: none; } label.has-error .error { display: inline-block; } <label> <span class="placeholder">Name:</span> <input type="text" name="name" data-validate="value"> <span class="error">Name cannot be empty</span> </label> <label> <span class="placeholder">Email:</span> <input type="text" name="email" data-validate="email"> <span class="error">Invalid Email address</span> </label> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>PD: no tiene sentido usar colores "verdes" para marcar algo que está bien en la interfaz de usuario. Es la misma lógica en la que nunca mostrarías un cuadro de alerta que diga "¡Oye! ¡Tu correo electrónico es correcto!" . Los usuarios suponen que es correcto si no se indica lo contrario.