テキスト入力欄が未記入だったらpタグ表示、入力されていたらjQueryのアニメーション開始

概要

お世話になります。
タイトルにもある通り、inputタグのテキスト入力欄に名前をいれ、アニメーションを開始するという流れを作りたいのですが、

入力欄に未入力の時に開始ボタンを押すと
・「※名前を入力してください」というテキストを表示

入力され
・jQueryのfadeOutアニメーションを実行

というものを作りたいのですが、アニメーションが動いてくれません。
どのような書き方をすればよいのでしょうか？
よろしくお願いします。

環境

VScode,XAMPP7.2.3

試したこと

<?php if($error['text']==='blank'):?> <p class="error">※名前を入力してください</p> <?php else: ?> <script> $(function(){ $('#start').click(function(){ $('#box').fadeOut(); }); }); <script> <? endif; ?> このようにelseを使ってアニメーションを起こそうとしましたがjQueryは実行されませんでした。

$('#start').submit(function(){
$('#box').fadeOut();
});
これも効果なしです。

PHP
1<?php
2  if($_POST['text']===''){
3      $error['text']='blank';
4  }
5?>
6
7<!DOCTYPE html>
8<html lang="ja">
9<head>
10    <meta charset="UTF-8">
11    <meta name="viewport" content="width=device-width, initial-scale=1.0">
12    <title>Document</title>
13    <link rel="stylesheet" href="style.css">
14    <script src="jq/jquery-3.4.1.min.js"></script>
15</head>
16<body>
17    <form action="#"method="post">
18    <input type="text" name="text"><br>
19    <?php
20        if($error['text']==='blank'):?>
21        <p class="error">※名前を入力してください</p>
22        <?php endif;?>
23    <input type="submit" value="開始" id="start">
24
25    <div id='box'>box</div>
26    </form>
27
28</body>
29</html>

jQuery
1<script>
2    $(function(){
3        $('#start').click(function(){
4            $('#box').fadeOut();
5        });
6    });
7    </script>
8

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

回答1件

ベストアンサー

ボタンを押したら要素の表示・非表示の動作でしたらphpを使わなくてもjQueryのみで行うことができます。

html
1<input id="input" type="text">
2<input id="start" type="button" value="start">
3<div class="error" style="display: block;">テキストがありません</div>
4<div id="box">fadeOutします</div>
5

js
1$('#start').click(function(){ // #startがクリックされたら
2  if($('#input')[0].value === '') { // <input type="text" name="text">に文字があるか確認
3    $('.error').css('display', 'block'); // なければerrorを表示
4    return
5  } else {
6    $('#box').fadeOut(); // あれば#boxがfadeOut
7  }
8});