アラート実装に関する質問

おはようございます。現在アカウント登録の実装をしています。
まず実現したいことはこちらになります。

以下コードになります。```ここに言語を入力

コード

<html>
    <head>
        <title>アカウント登録</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style>
          .base {
            margin: 2% 7% 0;
            height: 500px;
            background: blue;
            padding: 5% 10%;
            box-shadow: 5px 9px 8px 5px rgba(0, 0, 0, 0.5);
          }
          input {
            width: 300px;
            height: 40px;
            font-size: large;
          }
          #tuikaBtn {
            background: green;
          }
          h1 {
            font-family: serif;
          }
          .form-control::placeholder {
              color: #cacaca;
              opacity: 1;
          }
          table {
            border-collapse: collapse; 
          }

          th,td {
            border: 1px solid #312929;
            padding: 5px 10px;
          }
          .card {
            width: 100%;
            height: 350px;
          }
          .back{
            padding: 30px;
            position: absolute;
            bottom: 0;
            right: 0;
          }
          .form-group{
            margin: 10px 0 15px 0px;
          }
          #result {
            font-size: 120%;
            margin: 10;
            margin: 10px 20px;
            padding: 10px 5px 20px;
            margin: 10px 5px 10px 5px;
          }

          .row .card{
            color: red;
          }

          .card{
            color: blue;
            display: block;
            position: relative;
          }

          #modal{
            display: none;
            margin:1.5em auto 0;
            background-color: white;
            border: 1px solid black;
            width: 50%;
            padding: 10px 20px;
            position: fixed;
            border-radius: 5px;
          }

          #overLay{
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 120%;
            background-color: rgba(0,0,0,0.75);
          }

        </style>
    </head>
    <body>
        <div class="base container">
          <div class="row">
            <h1>アカウント登録</h1>
          </div>
          <div class="row">
            <div class="card" id="card">
              <div class="card-block">
                <form id="form-area" class="form-inline" method="post">
                    <div class="form-group">
                        <div class="input-group">
                          <input id="namae" name="namae" type="text" class="form-control" placeholder="名前">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <input id="nickname" name="nickname" type="text" class="form-control" placeholder="ニックネーム">
                        </div>
                    </div>

                    <div class="form-group">
                      <input id="tuikaBtn" type="button" name="touroku" value="追加">
                    </div>

                </form>
                <div id="tuikaMoto">

                </div>
                <div id="result"></div>
              </div>
            </div>
          </div>  
        </div>
      </div>
      <div id="overLay">
　　<script>
　　window.addEventListener('DOMcontentloaded', ()=>{
        
        
        tuikaBtn.addEventListener('click',function(){
         
          {
          window.alert("何か入力してください");
        }
           });  
          });
    </script>

addEventListnerの中でif文などを書いて試したのですが、うまくいきませんでした。
どなたか知恵をお借りしたいです。よろしくお願いいたします。

退会済みユーザー

2022/08/08 23:46

ユーザー入力を検証した結果が OK だったらサーバーに送信 (form を submit) する、NG だったら submit をキャンセルしてエラーメッセージを表示しユーザーに再入力を促すということがやりたいことでは？さらに、検証は未入力だけでなく文字数や使用できる文字も制限したいのでは？であれば、最初からその辺りまできちんと考えた実装をしてはいかがでしょう？今のままでは後戻り工数が発生するかも。

m.ts10806

2022/08/08 23:46

うまくいかないとは？ただ、本文がコードブロック内に含まれているので気づきにくいです。修正願います

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

回答1件

名前とニックネームの <input> に required 属性を付けます。<input required id="...
window.alert("何か入力してください"); を document.forms['form-area'].reportValidity(); にします。

alert() でやりたい場合は、