How to validate TinyMCE textarea in ASP.NET MVC?

How can i validate TinyMCE using asp.net MVC and razor? Currently, i was trying to validate it using Model validations but it is not working and not showing any errors even when TinyMCE textarea is blank, so how can i validate it? here is my javascript code

<script type="text/javascript">
//from https://www.tinymce.com/docs/demo/basic-example/
$(document).ready(function () {
    tinymce.init({
  selector: 'textarea',
  height: 500,
  menubar: false,
  plugins: [
    'advlist autolink lists link image charmap print preview anchor textcolor',
    'searchreplace visualblocks code fullscreen',
    'insertdatetime media table contextmenu paste code help'
  ],
  toolbar: 'insert | undo redo |  formatselect | bold italic backcolor  | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
  content_css: [
    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
    '//www.tinymce.com/css/codepen.min.css']
});
});

there isn't any good validation tutorial on it's official website, so how can i validate tinyMCE ?

Asked by:- Sam

: 7133 At:- 12/15/2017 8:11:47 AM

MVC tinyMCE-validate-in-razor validation razor

add comment to question

1 Answers

Answered by:- bhanu

You can validate TinyMCE using jQuery validate plugin, it is quite helpful plugin, widely used and easier to use.

Here is how you can validate TinyMCE using jQuery validate plugin

TinyMCE jQuery code

tinymce.init({
      selector: 'textarea',
      theme: "modern",
        plugins: [
             "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
             "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
             "save table contextmenu directionality emoticons template paste textcolor"
       ],
       content_css: "css/content.css",
       toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons", 
       
         setup: function (ed) {
                 //On change call
                   ed.on('change', function (e) {
                           //Validate tinyMCE on text change
                            tinyMCE.triggerSave();
                       
                               $("#" + ed.id).valid();
                           

                       }

                   );
               },
    });

HTML

<form id="myform" url="/">
    <textarea name="content"></textarea>
    <br/>
    <input type="submit" value="Submit" />
    </form>

jQuery validate part

$(function() {
//initialize validatoe
		var validator = $("#myform").submit(function() {

			// update underlying textarea before submit validation
			tinyMCE.triggerSave();
		})//validation rules
                 .validate({
			ignore: "",
			rules: {
				
				content: "required"
			},
			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("id")).focus();
					} else {
						toFocus.filter(":visible").focus();
					}
				} catch (e) {
					// ignore IE throwing errors when focusing hidden elements
				}
			}
		}
	})

here is the complete working fiddle

If you didn't liked the above plugin you can also try form.validation which is also another jQuery form validation plugin, and the link demostrate validating tinyMCE using it