I leave here an example of the problem I have in validating my form with textarea. When I click to send the form without filling in the textarea, the warning that the field is mandatory, this message appears above the label as shown in the example. I put in the example the HTML, js, and CSS that I apply in the form.
$(document).on('click', '.insdenuncia', function () {
if ($(".mainn__form").valid()) insertIntoDB($("form.mainn__form"));
});
$.validator.setDefaults({ ignore: ":hidden:not(.chosen-select)" });
$(".mainn__form").validate({
errorClass: "my-error-class",
validClass: "my-valid-class",
messages: {
Denuncia: {
required: "Campo obrigatório!",
minlength: 12
}
}
});
function insertIntoDB($o) {
$o.serializeArray();
var form_data = new FormData(document.getElementById("main__form"));
$.ajax({
url: 'insdenuncia.php',
type: 'POST',
cache: false,
data: form_data,
contentType: false,
processData: false,
success: function (result) {
}
});
}.main__form .form-group label {
font-family: "Quicksand", sans-serif;
font-size: 1.6rem;
color: #575757;
padding: 0 2.5rem;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 0;
-webkit-transition: .3s all;
transition: .3s all;
}
.main__form .form-group input,
.main__form .form-group textarea {
font-size: 1.6rem;
border-color: #f7f7f7;
padding: 0 2.5rem;
position: relative;
z-index: 1;
background: transparent;
}
.main__form .form-group input:not(:placeholder-shown) label,
.main__form .form-group textarea:not(:placeholder-shown) label {
top: 2%;
background: #fff;
z-index: 2;
font-weight: 600;
}
.main__form .form-group input:focus,
.main__form .form-group textarea:focus {
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.main__form .form-group input:focus label,
.main__form .form-group textarea:focus label {
background: #fff;
z-index: 2;
top: 2%;
font-weight: 600;
}
.main__form .form-group.form-message label {
font-family: "Quicksand", sans-serif;
font-size: 1.6rem;
color: #575757;
padding: 2.5rem;
position: absolute;
top: -12%;
-webkit-transform: unset;
transform: unset;
z-index: 0;
-webkit-transition: .3s all;
transition: .3s all;
}
.main__form .form-group.form-message textarea {
padding: 2.5rem;
}
.main__form .form-group.form-message textarea:not(:placeholder-shown) label {
top: -8% !important;
background: #fff;
z-index: 2;
font-weight: 600;
padding: 0 2.5rem !important;
}
.main__form .form-group.form-message textarea:focus {
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.main__form .form-group.form-message textarea:focus label {
background: #fff;
z-index: 2;
top: -8% !important;
font-weight: 600;
padding: 0 2.5rem !important;
}
.main__form .form-group.form-message label {
font-family: "Quicksand", sans-serif;
font-size: 1.6rem;
color: #575757;
padding: 2.5rem;
position: absolute;
top: -12%;
-webkit-transform: unset;
transform: unset;
z-index: 0;
-webkit-transition: .3s all;
transition: .3s all;
}
.main__form .form-group.form-message textarea {
padding: 2.5rem;
}
.main__form .form-group.form-message textarea:not(:placeholder-shown) label {
top: -8% !important;
background: #fff;
z-index: 2;
font-weight: 600;
padding: 0 2.5rem !important;
}
.main__form .form-group.form-message textarea:focus label {
background: #fff;
z-index: 2;
top: -8% !important;
font-weight: 600;
padding: 0 2.5rem !important;
}<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/pe-icon-7-stroke/dist/pe-icon-7-stroke.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
<form id="main__form" method="POST" enctype="multipart/form-data">
<div >
<textarea id="Denuncia" name="Denuncia" rows="6" placeholder="Message" required></textarea>
<label for="Denuncia">Digite a sua denúncia <span style="color: red;">*</span></label>
</div>
<div >
<button type="button" ><span> Enviar</span></button>
</div>
</form>The goal was for the mandatory message to appear just below the textarea and in red, if possible. Can you help?
CodePudding user response：
You are using the JQuery Validation Plugin where you can find the documentation here:
https://jqueryvalidation.org/validate/
https://jqueryvalidation.org/documentation/
The plugin is supposed to be used calling the validate() function over the element you wish to have the validation features (your form).
Once initialized like that, when the submit event occurs for the given form, the validation logic will be applied.
I strongly simplified your code to have only the form and its single textarea field. The css rules also were stripped off because it wasn't the focus of the issue.
So that when you submit the form, if there are no validation errors, your submit logic will be called, otherwise if the validation hasn't passed, the general error logic gets called and in addition the error of each invalid field will be printed in a specific label created ad hoc just after the target field and having the css class error that you can style arbitrarily (I used text-color: red !important)
//this must be called once at page load..
//and it will handle the form validation when the form will be submitted
//docs here: https://jqueryvalidation.org/validate/
$("#mainform").validate({
submitHandler: function(form) {
/*your logic when the form submit passed validation*/
insertIntoDB(form)
},
invalidHandler: function(event, validator) {
/*your logic when the form submit didn't pass validation*/
console.log('errors found when trying to submit the form!');
},
/*
//this way you could control where the error will be placed
errorPlacement: function(error, element) {
},*/
});
function insertIntoDB($o) {
/*your code to perform the server side action*/
console.log('ajax request performed!')
}.page{
margin: 3rem;
font-family: "Quicksand", sans-serif;
font-size: 1.6rem;
border: dashed 3px gray;
padding: 1rem;
}
.formgroup label {
display:block;
color: #575757;
}
.formgroup input,
.formgroup textarea {
border-color: #f7f7f7;
}
.error{
color:red !important;
}<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/pe-icon-7-stroke/dist/pe-icon-7-stroke.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
<div >
<form id="mainform" enctype="multipart/form-data">
<div >
<textarea
id="Denuncia"
name="Denuncia"
rows="6"
placeholder="Message" required></textarea>
<label for="Denuncia">Digite a sua denúncia <span style="color: red;">*</span></label>
</div>
<div >
<!-- this must be a button type=submit to trigger the form submit -->
<button type="submit" ><span> Enviar</span></button>
</div>
</form>
</div>