Показывать содержимое div, когда в поле введен действительный адрес электронной почты

Question

Поэтому я пытаюсь отобразить форму только при вводе действительного адреса электронной почты.

<p>Email:</p>
<input name="User_Email" type="text"/>
<div id="outform">
    <p>Company Name:</p>
    <input type="text" name="CompanyName"/>
    <p>Website:</p>
    <input type="text" name="Website" />
    <input type='submit'>
</div>

Сначала я получил остаток формы только для отображения, если в поле с значением было значение это:

<script>
    $('input[name=User_Email]').keyup(function(){
         if($(this).val().length)
           $('#outform').show();
         else
           $('#outform').hide();
    });
</script>

Что сработало, как и ожидалось, затем я попробовал это, что я не могу заставить работать:

<script>
    if $('input[name=User_Email]').is(':valid') { 
      $('#outform').show();
    else
      $('#outform').hide();
    }
</script>

Если кто-то может помочь мне, и это не ударяет по .is (': valid'), это будет очень ценно.

Answer 1

Во-первых , Вы должны добавить атрибут required в input

Как это

<input name="User_Email" type="text" required/>

Подробнее вы можете прочитать https://css-tricks.com/almanac/selectors/v/valid/

Во-вторых , Ваш синтаксис здесь неправильный line 1

if $('input[name=User_Email]').is(':valid') { 
 $('#outform').show(); // line 1
else // line 2
    $('#outform').hide(); // line 3
} // line 4

Он должен закрываться сразу после line 1 вместо line 4 здесь

if $('input[name=User_Email]').is(':valid') { 
 $('#outform').show(); } // line 1
else // line 2
    $('#outform').hide(); // line 3
 // line 4

Демо-версия ниже, чтобы проверить результат.

Обновлено

Измените тип поля электронной почты с text на email

input name="User_Email" type="email" required/>

Вы также можете использовать Regex как ответ Рневиу

function validateEmail(email) {
        var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(String(email).toLowerCase());
    }

// Should hide default
$('#outform').hide();

$('input[name=User_Email]').keyup(function(){
    var isValid = $(this).is(':valid') && validateEmail($(this).val());
 
    if (isValid)
     $('#outform').show();
    else
     $('#outform').hide();
});

function validateEmail(email) {
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Email:</p>
<input name="User_Email" type="email" required/>
<div id="outform">
    <p>Company Name:</p>
    <input type="text" name="CompanyName"/>
    <p>Website:</p>
    <input type="text" name="Website" />
    <input type='submit'>
</div>

Answer 2

if(!(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(this.User_Email))){
this.show = true;
}

Используйте вышеуказанный шаблон и покажите div, если this.show == true;

Answer 3

Соответствует введенному вами шаблону (электронная почта)

<script>
 $('input[name=User_Email]').keyup(function(){
  var pattern = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/; 
  if($(this).val().match(pattern))
   $('#outform').show();
  else
   $('#outform').hide();
  });
 </script>

Answer 4

Замените свой html.

<input name="User_Email" type="email" required />