<form action="">
	<div class="contact-form">
		<dl>
			<dt>お名前<span>必須</span></dt>
			<dd><input class="required" type="text"></dd>
		</dl>
		<dl>
			<dt>メールアドレス<span>必須</span></dt>
			<dd><input class="required" type="email"></dd>
		</dl>
		<dl>
			<dt>お問い合わせ内容</dt>
			<dd><textarea></textarea></dd>
		</dl>
	</div>
	<div class="contact-submit">
		<input type="submit">
	</div>
</form>

form{
	max-width: 500px;
	padding: 40px;
	margin: 20px;
	border: 1px solid #ccc;
}
.contact-form{
	dl{
		margin: 0 0 40px;
		dt{
			display: flex;
			align-items: center;
			font-weight: bold;
			margin: 0 0 10px;
			span{
				font-size: 12px;
				color: #fff;
				background: red;
				padding: 5px 10px;
				margin: 0 0 0 10px;
			}
		}
		dd{
			input,
			textarea{
				width: 100%;
				background: #f5f5f5;
				padding: 10px;
				border: none;
				box-sizing: border-box;
			}
			input{
				height: 50px;
			}
			textarea{
				height: 200px;
			}
			.error{
				display: block;
				font-size: 12px;
				font-weight: bold;
				color: red;
				margin: 10px 0 0;
			}
		}
	}
}
.contact-submit{
	input{
		width: 100%;
		height: 50px;
		font-size: 16px;
		font-weight: bold;
		color: #fff;
		background: green;
		border: none;
		cursor: pointer;
	}
}

$(function(){
	//送信ボタンをクリックしたタイミングで検証
	$('form').on('submit',function(){
		//エラー用の変数を作成
		var error;
		//エラーメッセージを初期化
		$(this).find('.error').remove();

		//必須項目の検証
		$(this).find('.required').each(function(){
			if($(this).val() === ""){
				//値が取得できない場合はエラーを返す
				error = true;
				//値が取得できない場合はエラーメッセージを表示
				$(this).after('<span class="error">未入力です</span>');
			}
		});

		//送信ボタンの制御
		if(error){
			return false;
		}
	});
});