複数フォームの入力チェックをしてマッチしなければ送信できないようにしたい

入力内容が条件と合わなかったら送信できないようにしたい

javascriptを使ってログイン機能を作っています。
ユーザーが入力した内容に不備があればエラーメッセージを出力してデータを送信しないようにしたいです。
HTMLのonsubmitで各入力フォームがtrueでなかった場合にエラーメッセージを出力して送信を止める処理が書きたいです。

発生している問題・エラーメッセージ

入力してもユーザー名以外エラーメッセージが上手く出力されません

エラーメッセージ

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <article>
    <p id="add-user">ユーザー登録</p>
    <form method="get" id="user-text" onsubmit="return (nameCheck()&&mailCheck()&&passCheck()&&passCheck2())">
        <input type="text" id="name" placeholder="ユーザー名">
        <p id="name_p"></p>
        <input type="text" id="mail" placeholder="メールアドレス">
        <p id="mail_p"></p>
        <input type="text" id="pass" placeholder="パスワード">
        <p id="pass_p"></p>
        <input type="text" id="Pass2" placeholder="パスワード(確認)">
        <p id="pass_p2"></p>
        <input id="button" type="submit" value="ユーザー登録">
    </form>
</article>
<script>
function nameCheck(){
 let name=document.getElementById("name");
 let nameP=document.getElementById("name_p");
 let regName = "/^[^a-zA-Z0-9]*$/g";
 if(name.value===""){
     nameP.innerHTML="名前を入力して下さい";
     return false;
 }else if(name.length >= 8){
     nameP.innerHTML="8文字以内で入力して下さい";
     return false;
 }else if(name.value.match(regName)===null){
     nameP.innerHTML("英数字以外で入力して下さい");
     return false;
 }else{
     return true;
 }
}
function mailCheck(){
 let mail = document.getElementById("mail");
 let mailP = document.getElementById("mail_p");
 if(mail.value === ""){
     mailP.innerHTML="メールアドレスを入力して下さい";
     return false;
 }
}
function passCheck(){
 let pass = document.getElementById("pass");
 let passP = document.getElementById("pass_p");
 if(pass.value === ""){
     passP.innerHTML="パスワードを入力して下さい";
     return false;
 }
}
function passCheck2(){
 let pass2 = document.getElementById("pass2");
 let passP2 = document.getElementById("pass_p2");
 if(pass2.value===pass.length){
    passP2.innerHTML="パスワードが違います";
    return false;
 }
}
</script>
</body>
</html>

試したこと

formタグのonsubmitの書き方が悪いかと思い調べましたがわかりません

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

&&条件は１つ目が満たさない場合は次の条件を見ません。

下記のようにしてみれば「どこを通っているか」見えます。

js
1function nameCheck(){
2 console.log("nameCheck")
3 let name=document.getElementById("name");
4 let nameP=document.getElementById("name_p");
5 let regName = "/^[^a-zA-Z0-9]*$/g";
6 if(name.value===""){
7     nameP.innerHTML="名前を入力して下さい";
8     return false;
9 }else if(name.length >= 8){
10     nameP.innerHTML="8文字以内で入力して下さい";
11     return false;
12 }else if(name.value.match(regName)===null){
13     nameP.innerHTML("英数字以外で入力して下さい");
14     return false;
15 }else{
16     return true;
17 }
18}
19function mailCheck(){
20 console.log("mailCheck")
21 let mail = document.getElementById("mail");
22 let mailP = document.getElementById("mail_p");
23 if(mail.value === ""){
24     mailP.innerHTML="メールアドレスを入力して下さい";
25     return false;
26 }
27}
28function passCheck(){
29 console.log("passCheck")
30 let pass = document.getElementById("pass");
31 let passP = document.getElementById("pass_p");
32 if(pass.value === ""){
33     passP.innerHTML="パスワードを入力して下さい";
34     return false;
35 }
36}
37function passCheck2(){
38 console.log("passCheck2")
39 let pass2 = document.getElementById("pass2");
40 let passP2 = document.getElementById("pass_p2");
41 if(pass2.value===pass.length){
42    passP2.innerHTML="パスワードが違います";
43    return false;
44 }
45