【jquery】【javascript】お問い合わせフォームで入力ミスがある場合エラーを表示させる方法

お問い合わせフォームの必須部分が空白の場合やメールアドレスが適切でない場合のエラーをブラウザーで処理させたい時に、jqueyもしくはjavascriptでプログラムを書きます。
PHPでも判定コードを書かなくてはなりませんがUIを意識してまずはブラウザー処理にしてあげるのがよいでしょう。

See the Pen mGVBBL by mymailcc82 (@mymailcc82) on CodePen.

HTML

HTMLでtype=submitのボタンの代わりにtype=buttonにidを付与してあげます。
ここではid=を"submit_id"としておきます。

これがクリックされた時の処理がこちらになります。

クリックされた時に、
エラーの表示を空に設定しています。
最初にエラーの時は問題ないですが、2回目以降のエラーでは、前のエラーの表示が残ってしまうので初期に戻してあげる必要があります。

次にcheck_regist_form()を見て正しいかどうかを判断しています。
この関数でエラーチェックを行っています。

check_regist_form()で空白がないか・メールアドレスが適切か判断しています。

formで記入されたデーターは、
jqueryの場合
例)
var name = $("#id").val();

javascriptの場合
var name = document."form name"."取得したいデーターの名前".value;
で取得可能です。
例)
var name = document.myForm.cst_name.value;

仮に名前が空なら
名前にエラーがありますと表示させます。以下のコードで表示可能です。
document.getElementById("errow_name").innerHTML="お名前をご記入ください";

ブラウザーでの処理は以上です。
ここから修正・追加してカスタマイズしてみてください。
※こちらの仕様だとエラー表示が2つ以上あった場合でも1つのエラーしか表示されません。