メールアドレスのバリデーションでNGなら、フォームにエラーメッセージを表示したい

Question

以下を実装したいのですが、②が分かりません。
どのようなコードを書いたら良いのか、
教えていただけないでしょうか？

メールアドレスを入力するフォームがあり、
①送信ボタンのクリックでメールアドレスをバリデーションして、
②NGなら、フォームのメールアドレス要素にエラーメッセージを表示して、カーソルをフォーカスして再入力を促す

<form action="" method="post">
<input type='email' name='cc'>
<input type='submit' name='add'>
</form>

if(isset($_POST['add'])){
$mailaddress = $_POST['cc'];
if(filter_var($mailaddress, FILTER_VALIDATE_EMAIL)){
     //正しい処理へ
}else{
     
}
}

Answer 1

サーバー側のバリデーションを利用するのであれば
PHPでAPIを用意しsubmit時に非同期にチェックしてエラーならsubmitをキャンセルしてください
それとあわせてphp側でチェックをすることは必要ですが
UXで通ったものをphpではじく場合は結局元のページに戻してやるのが妥当です

Comments

[yambejp]

ただしメールアドレスのチェックは生存チェックにはならないので
気合をいれてまでやる意味はないです
間違っていれば結局届きませんので

[退会済みユーザー]

ありがとうございます。とても参考になりました。
たしかに生存チェックにはなりませんでした。