Search code examples
jqueryhtmlshow

Show div contents when a valid email is entered in field


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.


Solution

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