验证表单中的文本区域输入

Question

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/pixeden-stroke-7-icon@1.2.3/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 class="main__form mainn__form" id="main__form" method="POST" enctype="multipart/form-data"> <div class="form-group form-message"> <textarea class="form-control" 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 class="text-right"> <button type="button" class=" btn btn-get insdenuncia"><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?

Answer 1

You are using the JQuery Validation Plugin where you can find the documentation here:

https://jqueryvalidation.org/validate/

https://jqueryvalidation.org/documentation/

https://jqueryvalidation.org/

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/pixeden-stroke-7-icon@1.2.3/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 class="page"> <form id="mainform" class="formgroup" enctype="multipart/form-data"> <div class="fieldgroup"> <textarea class="form-control" 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 class="text-right"> <!-- this must be a button type=submit to trigger the form submit --> <button type="submit" class=" btn btn-get insdenuncia"><span> Enviar</span></button> </div> </form> </div>