I’m trying to let user check if his email adress pass RFC standard, comparing it with regular expression dropped below.

I already checked few examples on console using function responsible for excecute validation test. I’m aware of possibilities that my regex is not ready for, but whenever I tried a few examples on console – it works.

Problem begins when function gets value from included ‘text’ HTML form.

Using Javascript I also checked how value is interpretated by browser (Simply pasting text into another div) – result is ok.

Why validation doesn’t work properly whenever use input value on HTML forms?

const regular = /^[a-z/d]+[/d/w.-]*@(?:[a-z/d-]+[a-z/d-].+){1,5}[a-z]{1,3}[a-z]$/i;
test = function(email) {
    if (regular.test(email) == false) {
        alert('Your email adress is not correct. Try again!')
        document.getElementById('result').innerHTML = document.getElementById('text').value;
        return false;
    } else {
        alert('Match');
        return true;
    }
}

<div id='form-structure'>
   <form name='form1' action='#'>
      <label for='email' name='email'>E-mail</label>
      <input type='text' name='text' id='text' placeholder="Enter your email" required>
      <button type='submit' name='submit' onclick="test(document.form1.text)" 
         value='Submit'>Test</button>
   </form>
</div>
<div id='result' style='font-size: 15px'>
</div>

Answer

While this may not be the best of code example, the simple solution to your issue lies in document.form1.text. Simple change it to document.forms.form1.text.

E.g.

<button type='submit' name='submit' onclick="test(document.forms.form1.text.value)" 
         value='Submit'>Test</button>

EDIT:

I missed the .value before. Now it should work.

Email validation using Javascript doesn’t work with HTML

Advertisement

Answer

EDIT: