まず、問題の原因を特定するために、以下の点を確認してください:
-
正しいバリデーションクラスが適用されているかどうかを確認します。赤いバリデーションクラス(たとえば、"red-validation")が正しく指定されているかを確認してください。
-
セレクタが正しい要素を対象としているか確認します。jQueryセレクタが対象の要素を正しく選択していることを確認してください。
-
CSSのスタイルが正しく設定されているか確認します。赤いバリデーションクラスに対する適切なスタイルがCSSで指定されていることを確認してください。
次に、いくつかの簡単なコード例を示します:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.red-validation {
color: red;
}
</style>
</head>
<body>
<form>
<input type="text" id="username" required>
<input type="submit" value="Submit">
</form>
<script>
$(document).ready(function() {
$('form').submit(function(event) {
if ($('#username').val() === '') {
$('#username').addClass('red-validation');
event.preventDefault();
}
});
});
</script>
</body>
</html>
上記のコード例では、フォームがサブミットされる前にユーザー名フィールドが空である場合、赤いバリデーションクラスが適用されます。CSSスタイルで指定された色が、赤いテキストで表示されるはずです。