Show div contents when a valid email is entered in field

Question

So I'm trying to display a form only when a valid email address is entered.

<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>

I first got the remainder of the form only to display if there was a value in the field with this:

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

Which worked as expected, then I tried this which I can't get to work:

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

If anyone could help me udnerstand this isn't hitting the .is(':valid') clause it would be much appriciated.

Please format (indent) your code properly. It's a courtesy to your volunteers and just good practice. — isherwood, Jan 08 '20 at 14:30

Nguyễn Văn Phong · Accepted Answer · 2020-01-10T01:32:30.347

Firstly, You should add required attribute into input

Like this

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

More detail you can read https://css-tricks.com/almanac/selectors/v/valid/

Secondly, Your syntax is incorrect here line 1

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

It should close right after line 1 instead line 4 here

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

Live demo below to check the result.

Updated

Change to the type of email field from text to email

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

You can also use Regex like rneviu's answer

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>

Hi, this answer rpovides the same output as what I already had, this display the rest of the from as soon as I enter any character in the field, I want it to only displat once the entire email is displayed.. So if I was to type in user@website.com, the form would only show once a valid email was entered. The above answer shows the form when I enter a single character — bbowesbo, Jan 09 '20 at 10:13
Yes, `required` attribute just check length instead `email` format. If you need validate email, you should add `type="email"` attribute, It'll work fine. — Nguyễn Văn Phong, Jan 09 '20 at 10:19
This is closer, how would we change it so the form dosent show on the second string, after the @ and only after the '.', the above shows on user@t - the desired out put would be to show from user@test. — bbowesbo, Jan 09 '20 at 10:55
Just to be clear, for user@website.com, on the above user@w shows the form, and I am trying to get it to only show the form when user@website. — bbowesbo, Jan 09 '20 at 11:00
Yep, all you need to do is using [Regex](https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript) — Nguyễn Văn Phong, Jan 09 '20 at 12:52

score 0 · Answer 2 · answered Jan 08 '20 at 14:30

0

Replace your html.

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

answered Jan 08 '20 at 14:30

Star_Man

1,091
1
13
30

score 0 · Answer 3 · edited Jan 08 '20 at 14:35

0

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;
}

Use the above pattern and show the div if this.show == true;

edited Jan 08 '20 at 14:35

Adriaan

17,741
7
42
75

answered Jan 08 '20 at 14:32

deepak reddy

57
1
8

score 0 · Answer 4 · answered Jan 08 '20 at 14:36

Match you input with pattern(email)

<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>

Show div contents when a valid email is entered in field

4 Answers4