I have a form, and I need to hide the buttons if in the email input there is no "@" and if the phone input doesn't have at least 8 numbers. I have success with the second but trouble with the first condition
$('.vti__input').keyup(function() {
if ($(this).val().length <= 8) {
$('.widget-channels').hide();
}
else {
$('.widget-channels').show(); }
}).keyup(); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" name="email" placeholder="Ваша почта*" class="input-text"></div>
<input type="tel" placeholder="Ваш телефон*" autocomplete="off" name="phone" id="" maxlength="25" tabindex="0" class="vti__input">
<div class="widget-channels"><button class="telegram-channel">
<span class="channel-icon">
<img src="/img/icons/svg/telegram.svg" alt="Telegram"></span>
<div>Telegram</div>
</button>
<button class="viber-channel"><span class="channel-icon">
<img src="/img/icons/svg/viber.svg" alt="Viber"></span>
<div>Viber</div>
</button>
</div>You can use javascript's include function
let phone = $('.vti__input')
let email = $('.input-text')
let widget = $('.widget-channels')
phone.keyup(function() {
if (phone.val().length <= 8 || !email.val().includes("@") ) {
widget.hide();
} else {
widget.show();
}
}).keyup();
email.keyup(function() {
if (phone.val().length <= 8 || !email.val().includes("@") ) {
widget.hide();
} else {
widget.show();
}
}).keyup();<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" name="email" placeholder="Ваша почта*" class="input-text"></div>
<input type="tel" placeholder="Ваш телефон*" autocomplete="off" name="phone" id="" maxlength="25" tabindex="0" class="vti__input">
<div class="widget-channels"><button class="telegram-channel">
<span class="channel-icon">
<img src="/img/icons/svg/telegram.svg" alt="Telegram"></span>
<div>Telegram</div>
</button>
<button class="viber-channel"><span class="channel-icon">
<img src="/img/icons/svg/viber.svg" alt="Viber"></span>
<div>Viber</div>
</button>
</div>