Skip to content
Advertisement

Email validation using Javascript doesn’t work with HTML

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>

Advertisement

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.

2 People found this is helpful
Advertisement