2
エラーメッセージが表示される場所をカスタマイズしようとしていましたが、できないし、ウェブを検索しようとしていましたが、 "errorLabelContainer"またはvalidate.jsjQuery Validate errorLabelContainer
名前とメールの2つの入力があります。
$('#form').validate({
errorClass: "errorOne", // Now class of '.errorOne' will be used for errors
rules: {
firstname: {
required: true
},
email: {
required: true
}
},
messages: {
firstname: {
errorElement : 'div',
},
email: {
errorElement : 'div',
}
},
});
});
なお：私はあなたがこのようなエラーのクラスを変更するerrorClassオプションを使用することができます
<script>
jQuery(function($) {
$('#form').validate({
\t errorClass: "errorOne",
\t rules: {
\t \t firstname: {
\t \t \t required: true
\t \t },
\t \t email: {
\t \t \t required: true
\t \t }
\t },
\t messages: {
\t \t firstname: {
\t \t \t required: 'Please enter name',
\t \t \t errorElement : 'div',
\t \t \t errorLabelContainer: 'errorOne'
\t \t },
\t \t email: {
\t \t \t required: 'Please enter a valid email address',
\t \t \t errorElement : 'div',
\t \t \t errorLabelContainer: '.errorTwo'
\t \t }
\t }
});
</script><style>
\t .errorOne{
\t \t background: lightgreen;
\t \t min-height: 20px;
}
\t .errorTwo{
\t \t background: pink;
\t \t min-height: 20px;
}
\t </style><!DOCTYPE html>
<html lang="en">
<head>
\t <meta charset="utf-8">
\t <title>jQuery validation plug-in - main demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>
</head>
<body>
<form id="form" method="post" action="">
\t <div style="border:1px solid red; height: 500px">
\t \t <div class="col-md-8">
\t \t \t <label for="firstname">Enter Name:</label>
\t \t \t <input class="form-control" type="text" name="firstname" />
\t \t \t <label for="email">Enter Email:</label>
\t \t \t <input class="form-control" type="text" name="email" /><br>
\t \t \t <input type="submit" class="button" value="Submit" />
\t \t </div>
\t \t <div class="col-md-4">
\t \t \t <ul>
\t \t \t \t <li>
\t \t \t \t \t <p>The name error must be displayed in the div with class errorOne</p>
\t \t \t \t \t <div class="errorOne"></div>
\t \t \t \t </li>
\t \t \t \t <li>
\t \t \t \t \t <p>The email error must be displayed in the div with class errorTwo</p>
\t \t \t \t \t <div class="errorTwo"></div>
\t \t \t \t </li>
\t \t \t </ul>
\t \t </div>
\t </div>
</form>
</body>
</html>
こんにちはを見て、迅速な対応をありがとうございました。 –
こんにちは、もう一度私の質問を見てもらえますか？基本的には、私は2つの列を持って、1つの列は、フォームを持って、他の列は、カスタムエラーメッセージを表示する2つのdivを持っています。 –
@ThandoHlophe私の答えを更新しました:) – user3284463