以下ののコードでは、入力フィールドがblurイベントを発生させる（一度フォーカスをあてている状態から外す）とAjaxリクエストが送信されます。そのリクエストはValidationServletで処理され、入力値が5文字未満の場合はエラーメッセージが返されます。
これらのコードは一例であり、具体的な要件やアプリケーションの設定により変更を加えてください。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form Validation</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form>
<input id="myInputField" type="text" name="input">
<div id="errorDiv"></div>
<input type="submit" value="Submit">
</form>
<script>
// DOM (Document Object Model)が読み込まれた後に実行されるコードを定義します。
$(document).ready(function() {
// '#myInputField'というIDのinputフィールドからフォーカスが外れたとき（blurイベント）に実行される関数を定義します。
$('#myInputField').blur(function() {
// この関数のcontext（'this'）は'#myInputField'です。val()関数でその値を取得します。
let inputVal = $(this).val();
// Ajaxリクエストを作成して送信します。
$.ajax({
// リクエストを送信するサーバのURLを指定します。
url : 'Validation',
// リクエストのHTTPメソッドを指定します。ここではPOSTを使用します。
type : 'POST',
// サーバに送信するデータを指定します。ここではinputフィールドの値を送信します。
data : {
inputValue : inputVal
},
// リクエストが成功したときに実行される関数を定義します。サーバから返されたデータがこの関数の引数として渡されます。
success : function(data) {
// サーバから返されたデータに'error'フィールドが存在し、その値が真であればエラーメッセージを表示します。
if (data.error) {
$('#errorDiv').text(data.message);
} else {
// 'error'フィールドが偽であればエラーメッセージをクリアします。
$('#errorDiv').text('');
}
}
});
});
});
</script>
</body>
</html>package controller;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/Validation")
public class ValidationServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// リクエストから"inputValue"パラメータの値を取得します。
String inputValue = request.getParameter("inputValue");
// validateメソッドを使ってinputValueの検証を行います。
// 検証エラーがあればエラーメッセージを返し、なければnullを返します。
String errorMessage = validate(inputValue);
// レスポンスのContent-Typeを設定します。ここではJSON形式のデータを返すため"application/json"を指定します。
response.setContentType("application/json");
// レスポンスの文字コードを設定します。ここではUTF-8を指定します。
response.setCharacterEncoding("UTF-8");
// レスポンスに書き込むためのPrintWriterオブジェクトを取得します。
PrintWriter out = response.getWriter();
// レスポンスボディにJSON形式のデータを書き込みます。
// エラーメッセージがnullでなければ"error"はtrue、それ以外はfalseになります。
out.print("{\"error\": " + (errorMessage != null) + ", \"message\": \"" + errorMessage + "\"}");
// 書き込み内容をフラッシュして確実に送信します。
out.flush();
}
// inputValueの検証を行うメソッドです。
// ここでは入力値の長さが5未満の場合にエラーメッセージを返していますが、
// 実際の検証ロジックはアプリケーションの要件に応じて変更してください。
private String validate(String inputValue) {
if (inputValue.length() < 5) {
// inputValueが5文字未満の場合はエラーメッセージを返します。
return "Input is too short";
} else {
// inputValueが5文字以上の場合はエラーがないためnullを返します。
return null;
}
}
}なお、このサンプルコードではエラーハンドリングやセキュリティ対策などは考慮していません。実際のアプリケーションで使用する場合は、それらの重要な要素も適切に考慮する必要があります。