フォーム入力チェックの警告文を表示する条件分岐の書き方

Question

実現したいこと

１：全ての項目を入力必須に設定しどれか一つでも入力されていない項目があればその項目の入力を促す文章を表示する
２：#mailの項目だけは正しいメールの形式になっているかチェックし、なっていなければ正しいメール形式になっていることを促す文章を表示する。ただし入力されていない場合は他の項目同様入力を促す文章を表示する

ご教示いただきたいこと

• 条件分岐の綺麗な書き方 (if文を使った条件分岐でなくても、上記の実現したいことが実現できれば方法は問いません)

jqueryを使って入力チェックを行いたいと考えています。以下に私の書いたプログラムを載せます

$(document).ready(function () {
          $('button[type=submit]').click(function () {
              if ($('#name').val() == '' || $('#mail').val() == '' || $('#age').val() == '') {//フォームに空の項目があるか     
                if (validatemail($('#mail').val()) == false) {//メールの形式は妥当か
                      //メールの項目は入力されているがメール形式になっていないことを伝える文章を表示する処理
                      //入力されていない項目の入力を促す処理
                      console.log('入力されていない項目がある。メールは入力されているが形式がダメ');
                  } else {
                    //入力されていない項目の入力を促す処理
                    //全てが入力されていな場合もこの処理が実行される
                    console.log('入力されていない項目がある');
              } else {
                if (validatemail($('#mail').val()) == false) {//メールの形式は妥当か
                      //メールの項目は入力されているがメール形式になっていないことを伝える文章を表示する処理
                      console.log('全ての項目は入力されているがメールの形式がダメ');
                  } else {
                      //全ての項目の検証に成功した場合の処理
                      console.log('全ての検証をクリア');
                  }
              }
          })
      })

この書き方ですと重複した処理も多くあまりよくないと思うのでもう少し読みやすい分岐条件の書き方を教えてください

Comments

[kei344]

提示のコードは空項目を無視しますが、転記の際にコードが抜けたりはしてませんか？

[qwefrg]

すみません、空項目を無視するというのは具体的にはどういうことでしょうか？全ての項目が空の場合はconsole.log('入力されていない項目がある');が実行されこれは私の期待している処理ではあります

[kei344]

修正前のコードの話です。 https://teratail.com/questions/history-questions/86263

[qwefrg]

申し訳ないです。.val()つけ忘れていたので加筆しました

Answer 1

フラグで管理するか、エラーテキストをプールしておいてその値で判断するかですかね

$(function(){
  $('button[type=submit]').on('click',function (e){
    var flg=false;
    var error_txt="";
    if ($('#name').val() == '' || $('#mail').val() == '' || $('#age').val() == '') {
      error_txt+="入力されていない項目がある。";
      flg=true;
    }
    if (validatemail($('#mail').val()) == false) {
      error_txt+="メールは入力されているが形式がダメ";
      flg=true;
    }
    if(flg){
      console.log(error_txt);
      e.preventDefault();
    }else{
      console.log('全ての検証をクリア');
    }
  });
});

Comments

[qwefrg]

回答ありがとうございます。こういう書き方もできるのですね。大変勉強になりました

Answer 2

検証と処理を分ける。

mail_valid = validatemail($('#mail')) 
//val要りますね
empty = ($('#name').val() == '' || $('#mail').val() == '' || $('#age').val() == '')

if(!mail_valid){
  //メールの項目は入力されているがメール形式になっていないことを伝える文章を表示する処理
}
if(empty){
  //入力されていない項目の入力を促す処理
}
if(mail_valid && !empty){
  //全ての項目の検証に成功した場合の処理
}

Comments

[qwefrg]

回答ありがとうございます。この書き方だと大分綺麗にかけますね。大変勉強になりました。