メールアドレスの入力フォーム

メールアドレスが入力されたときにクラスを追加したいのですが、Cannot read property 'match' of nullというエラーが表示されます。

改善方法を教えていただきたいです。

html
1 <form id="form" action="#">
2            <input type="text" name="" id="email" 
3             placeholder="Enter Email Adress" onkeydown="validation()">
4            <span id="text"></span>
5    </form>

JavaScript
1function validation(){
2    const form = document.getElementById('form');
3    const email = document.getElementById('email').nodeValue;
4    const text = document.getElementById('text');
5    const pattern =  /^[^ ]+@[^ ]+.[a-z]{2,3}$/;
6
7    if(email.match(pattern)){
8        form.classList.add('valid');
9        form.classList.remove('invalid');
10    }else{
11        form.classList.remove('valid');
12        form.classList.add('invalid');
13    }
14}

行動規範の内容に同意します

回答1件

ベストアンサー

diff
1
2function validation(){
3    const form = document.getElementById('form');
4-   const email = document.getElementById('email').nodeValue;
5+   const email = document.getElementById('email').value;
6    const text = document.getElementById('text');
7    const pattern =  /^[^ ]+@[^ ]+.[a-z]{2,3}$/;
8
9    if(email.match(pattern)){
10        form.classList.add('valid');
11        form.classList.remove('invalid');
12    }else{
13        form.classList.remove('valid');
14        form.classList.add('invalid');
15    }
16}
17