Javascript verify user input

Question

I need major help, I've been on this code for two days now. I have this table produced by javascript, which is used to confirm user input. If the user sees an error, they can click on the cell and it enables the user to edit the content right there. I'm trying to setup where it displays if the users email is valid, or invalid. The script works good, but if the user deletes the full email, the content is no longer editable, which would not be good. My code so far is:

HTML:

<table id = 'confirm'>
  <tr>
    <th>Email</th>
    <td id = 'tdEmail'>
      <div onkeyup = 'verifyEmail(this.parentNode.id)' contentEditable>
        abc@123.com
        <div id = 'validInvalid'>
          <span class = 'dgreen'> //Use to create a sort of green for valid email, when the user first sees the confirm table, the email is valid.
            <br/>Valid email!
          </span>
        </div>
      </div>
    </td>
  </tr>
</table>    

JS:

function verifyEmail(id){
  var email = document.getElementById.firstChild.firstChild.nodeValue;
  var emailFilter = /^[^0-9][A-z0-9_]+([.][A-z0-9_]+)*[@][A-z0-9_]+([.][A-z0-9_]+)*[.][A-z]{2,4}$/;
  if(!emailFilter.test(email)){
    document.getElementById("validInvalid").innerHTML = "<span class = 'red'><br/>Not a valid email!</span>";
  }else{
    document.getElementById("validInvalid").innerHTML = "<span class = 'dgreen'><br/>Valid email!</span>";
  }
}

Answer 1

Your div width gets reduced that is why you are not able to edit the content if the content is set to '' one way to solve your problem is to give a fixed width to your div.

You can see the fix below : jsfiddle