フォームの項目チェックで、未入力→その後入力した際にエラーの文字が消えてくれない

Question

###前提・実現したいこと
フォームの項目が未入力の時に送信したらその箇所に対してエラーの文字が出るようにしたいと思っています。
また、メールアドレスと名前の欄、両方にエラーの文字が出ていたとして、どちらかだけを入力して送信した際、送信は出来ないのですが、入力した箇所のエラー文字は消える。
という動きにしたいです。

###発生している問題・エラーメッセージ
メールアドレス、名前の項目を未入力の状態にして送信→未入力の箇所にエラーの文字が出る。
メールアドレスだけを入力して、もう一度送信を押すと、メールアドレスは入力されているため、エラーの文字が消えます。
ですが、同様の操作を名前の箇所で行うとエラーの文字が消えてくれません。
つまり、
メルアド、名前の項目共に未入力→両方共エラー文字が出る→名前の項目のみを入力して送信→名前の項目のエラーが消えてくれない。
という問題が発生しております。

###該当のソースコード

<form id="register" action="#">
  <th>メールアドレス<span id="mailerror"></span></th><br>
   <input type="text" name="mail"><br><br>

  <th>名前<span id="nameerror"></span></th><br>
   <input type="text" name="namae"><br><br>

  <input type="submit" value="送信">
</form>

var mailE = '  (メールアドレスを入力して下さい)';
var nameE = '  (名前を入力して下さい)';
document.getElementById('register').onsubmit = function() {
  var mailCheck = document.getElementById('register').mail.value;
  var nameCheck = document.getElementById('register').namae.value;
  //入力してあればtrue 未入力ならfalse
  var MC = jg(mailCheck);
  var NC = jg(nameCheck);

 if ( !MC && !NC ) {
   document.getElementById('mailerror').textContent = mailE;
   document.getElementById('nameerror').textContent = nameE;
   return false;
 }

 if ( !MC ) {
   document.getElementById('mailerror').textContent = mailE;
   return false;
 } else {
   document.getElementById('mailerror').textContent = "";
 }
  if ( !NC ) {
   document.getElementById('nameerror').textContent = nameE;
   return false;
 } else {
   document.getElementById('nameerror').textContent = '';
 }
}
function jg(mn) {
 var mn;
  if ( mn.length != 0 ) {
    mn = true;
    return mn;
  } else {
    mn = false;
    return mn;
  }
}

JavaScriptの

if ( !MC ) {
   document.getElementById('mailerror').textContent = mailE;
   return false;
 } else {
   document.getElementById('mailerror').textContent = "";
 }
  if ( !NC ) {
   document.getElementById('nameerror').textContent = nameE;
   return false;
 } else {
   document.getElementById('nameerror').textContent = '';
 }

ここのif文の上の方しか動かないようなのですが、それの理由がわかりません。

これの解決方法をご教示いただきたいと思っております。
よろしくお願い致します。

Answer 1

関数内で return false; とすると、それ以降の処理は行われません。なので、変数に状況を入れておいて最後にそれを return すると良いと思います。

var mailE = '  (メールアドレスを入力して下さい)';
var nameE = '  (名前を入力して下さい)';
document.getElementById('register').onsubmit = function() {
  var mailCheck = document.getElementById('register').mail.value;
  var nameCheck = document.getElementById('register').namae.value;
  //入力してあればtrue 未入力ならfalse
  var MC = jg(mailCheck);
  var NC = jg(nameCheck);
  var flag = true; // 追加

 if ( !MC && !NC ) { // 多分無くてもよい。
   document.getElementById('mailerror').textContent = mailE;
   document.getElementById('nameerror').textContent = nameE;
   flag = false; // 変更
 }

 if ( !MC ) {
   document.getElementById('mailerror').textContent = mailE;
   flag = false; // 変更
 } else {
   document.getElementById('mailerror').textContent = "";
 }
  if ( !NC ) {
   document.getElementById('nameerror').textContent = nameE;
   flag = false; // 変更
 } else {
   document.getElementById('nameerror').textContent = '';
 }
 return flag; // 追加
}
function jg(mn) {
 var mn;
  if ( mn.length != 0 ) {
    mn = true;
    return mn;
  } else {
    mn = false;
    return mn;
  }
}
```**動くサンプル：**[https://jsfiddle.net/0ru37knt/](https://jsfiddle.net/0ru37knt/)

Comments

[yuzuka]

ご回答頂きありがとうございます。
大変よく分かりました！
ありがとうございました！！