Is it possible to use the jquery validator in TinyMCE? - html

Question

I'm trying to use jQuery no validator in a form that has a textarea using TinyMCE and I can't leave it as required.
I found some examples to make this requirement, but everyone I add ends up removing TinyMCE from my textarea.
Can anyone can help me? all examples are always giving error.
This is my code:
#model Contato
#{
ViewData["Title"] = "Contato nos";
Layout = "~/Views/Shared/_Layout.cshtml";
var end = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d14635.842857905212!2d-47.446606835918516!3d-23.49792447583607!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94cf61e82bba04e5%3A0xec1214319ddea74d!2sMarcenaria%20MF!5e0!3m2!1spt-BR!2sbr!4v1620093541821!5m2!1spt-BR!2sbr";
}
<!-- ======= Breadcrumbs ======= -->
<section id="breadcrumbs" class="breadcrumbs">
<div class="container">
<div class="d-flex justify-content-between align-items-center">
<h2>Contato</h2>
<ol>
<li><a asp-controller="Home" asp-action="Index">Marcenaria MF</a></li>
<li>Contato</li>
</ol>
</div>
</div>
</section><!-- End Breadcrumbs -->
<!-- ======= Contact Section ======= -->
<div class="map-section">
<iframe style="border:0; width: 100%; height: 350px;" src=#end frameborder="0" allowfullscreen></iframe>
</div>
<section id="contact" class="contact">
<div class="container">
<div class="row justify-content-center" data-aos="fade-up">
<div class="col-lg-10">
<div class="info-wrap">
<div class="row">
<div class="col-lg-4 info">
<i class="bi bi-geo-alt"></i>
<h4>Endereço:</h4>
<p> R. Yashica, N° 350 - Jardim Bela Vista,<br>Sorocaba - SP, 18016-440</p>
</div>
<div class="col-lg-4 info mt-4 mt-lg-0">
<i class="bi bi-envelope"></i>
<h4>Email:</h4>
<p>info#example.com<br>contact#example.com</p>
</div>
<div class="col-lg-4 info mt-4 mt-lg-0">
<i class="bi bi-phone"></i>
<h4>Telefones:</h4>
<p>(15) 99756-6839<br>(15) 99761-6833</p>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-5 justify-content-center" data-aos="fade-up">
<div class="col-lg-10">
<form id="form_contato" asp-controller="Contatos" asp-action="Contato" method="post" role="form" class="php-email-form" enctype="multipart/form-data">
<div class="row">
<div class="col-md-6 form-group">
<input type="text" name="Nome" class="form-control" asp-for="Nome" placeholder="Seu Nome">
<span asp-validation-for="Nome" class="text-danger"></span>
</div>
<div class="col-md-6 form-group mt-3 mt-md-0">
<input type="email" class="form-control" name="Email" asp-for="Email" placeholder="Seu Email">
<span asp-validation-for="Email" class="text-danger"></span>
</div>
</div>
<div class="form-group mt-3">
<input type="text" class="form-control" name="Assunto" asp-for="Assunto" placeholder="Assunto">
<span asp-validation-for="Assunto" class="text-danger"></span>
</div>
<div class="form-group mt-3">
<textarea class="form-control" name="Mensagem" rows="5" asp-for="Mensagem" placeholder="Mensagem"></textarea>
<span asp-validation-for="Mensagem" class="text-danger"></span>
</div>
<div class="my-3">
<div class="loading" id="loading">Loading</div>
<div class="error-message" id="error-message"></div>
<div class="sent-message" id="sent-message">Sua mensagem foi enviada. Obrigado!</div>
</div>
<div class="text-center"><button type="submit">Enviar Mensagem</button></div>
</form>
</div>
</div>
</div>
</section><!-- End Contact Section -->
<script src="~/tinymce/js/tinymce/tinymce.min.js"></script>
<script src="~/tinymce/langs/pt_BR.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation/dist/additional-methods.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
<script>
$(document).ready(function () {
tinymce.init({
selector: 'textarea',
height: 250,
menubar: false,
plugins: 'link, autolink link, textcolor, paste',
toolbar: false,
content_css: '//www.tiny.cloud/css/codepen.min.css',
language: 'pt_BR',
paste_remove_styles_if_webkit: false,
paste_block_drop: false,
paste_data_images: false,
paste_as_text: true,
paste_enable_default_filters: false,
paste_webkit_styles: "none",
browser_spellcheck: true,
contextmenu: true,
branding: false,
statusbar: false,
setup: function (ed) {
//On change call
ed.on('change', function (e) {
//Validate tinyMCE on text change
tinyMCE.triggerSave();
$("#" + ed.id).valid();
}
);
},
});
$(function () {
$.validator.setDefaults({
submitHandler: function () {
$('#loading').addClass('d-block');
}
});
var content = tinyMCE.get("Mensagem");
tinyMCE.triggerSave();
//initialize validatoe
var validator = $("#form_contato").submit(function () {
// update underlying textarea before submit validation
alert($("#Mensagem").val());
}).validate({
ignore: ".ignore",
rules:
{
Email: {
required: true,
email: true,
},
Nome: {
required: true,
},
Assunto: {
required: true
},
Mensagem: {
required: true,
},
},
errorPlacement: function (label, element) {
// position error label after generated textarea
if (element.is("textarea")) {
label.insertAfter(element.next());
} else {
label.insertAfter(element)
}
}
});
validator.focusInvalid = function () {
// put focus on tinymce on submit validation
if (this.settings.focusInvalid) {
try {
var toFocus = $(this.findLastActive() || this.errorList.length && this.errorList[0].element || []);
if (toFocus.is("textarea")) {
tinyMCE.get(toFocus.attr("#Mensagem")).focus();
} else {
toFocus.filter(":visible").focus();
}
} catch (e) {
// ignore IE throwing errors when focusing hidden elements
}
}
}
})
});
</script>
#if (ViewData["MSG"] != null)
{
<script>
alert(#ViewData["MSG"].ToString());
</script>
}
I really appreciate your help guys