Show/hide buttons if input don't have @

user_12966881 0
Viewed 54

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>

html jquery javascript
1 Answers

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>

user_91585510
Related