How to hide a div until a certain field(s) value is greater than nothing

Question

So, what I want to accomplish here is to prevent people from entering the rest of the form until they focus on the first section by hiding the last section until the value of a certain field is greater than nothing.

Here is my HTML:

<div class="fieldcontainer">
<label>E-mail:</label>
<input type="email" name="email" maxlength="100" id="email" required>
</div>
<br><br>
<div id="projectinformation" style="display:none">
<h3>Project Information</h3>
<div class="fieldcontainer">
<label>Project Name:</label>
<input type="text" name="project_name" maxlength="70" required>
</div>
<br><br>
<div class="fieldcontainer">
<label>Project Number:</label>
<input type="text" name="project_number" required>
</div>
<br><br>
<div class="fieldcontainer">
<label>Business Unit:</label>
<select name="business_unit" required>
    <option>--Select--</option>
</select>
</div>
<br><br>
<div class="fieldcontainer">
<label>Project Address:</label>
<input type="text" name="address" required>
</div>
<br><br>
<div class="fieldcontainer">
<label>Number of users on site:</label>
<select id="numberofstaff">
    <option class="staffselection" value="">--Select--</option>
    <option class="staffselection" value="smalljobsite">1-3 staff</option>
    <option class="staffselection" value="mediumjobsite">4-7 staff</option>
    <option class="staffselection" value="largejobsite">8+ staff</option>
</select>
</div>
</div>

Here is my JS:

while (document.getElementById('email').value > ""){
document.getElementById('projectinformation').style.display = 'initial';
}

Answer 1

You'd probably want an event handler for that, and check the inputs value length, then show the rest of the form

document.getElementById('email').addEventListener('input', function() {
    if ( this.value.length > 0 ) {
        document.getElementById('projectinformation').style.display = 'block';
    }
}, false);

or in jQuery

$('#email').on('input', function() {
    if (this.value.length > 0) $('#projectinformation').show();
});

Answer 2

Here is jQuery solution:

  $("#email").keyup(function() {
      if($(this).val().length)     
         $('#projectinformation').show();
      else 
         $('#projectinformation').hide();
  });

If you want to validate if it is a valid email and then show the form, you can do this: ( https://stackoverflow.com/a/2855946/1845408 ):

 function isValidEmailAddress(emailAddress) {
      var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
      return pattern.test(emailAddress);
 };


  $("#email").keyup(function() {
      if(isValidEmailAddress($(this).val())) {    
             $('#projectinformation').show();
          else 
            $('#projectinformation').hide();
  });