Summernote, Bootstrap with jQuery Validation not working!

[SteamingAlong]

Hi Guys,

 

I'm not great with jQuery. However, I have a form validated server side no problem ... but I need it to be validated client side too. This is where I use a jQuery validation for ... to validate the form and the summernote editor textarea.

 

Html Form:

<form role="form" id="myprofile" action="/edit/" autocomplete="off" method="post">
<input type="hidden" name="submitted" id="submitted" autocomplete="false" />
<div class="form-body">
<div class="row">
<div class="col-md-6">
<div class="form-group form-md-line-input form-md-floating-label">
<input type="text" name="firstname" id="firstname" class="form-control" autocomplete="false" />
<label for="form_control_1">First Name *</label>
<span class="help-block">Enter your First Name here...</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group form-md-line-input form-md-floating-label"><br />
<textarea name="summernote1" class="form-control summernote" id="summernote1"></textarea>
<label for="form_control_1"><h4 class="bold italictext">About Me *</h4></label>
<span class="help-block">Enter your info here...</span>
</div>
</div>
</div>
<div class="row">
<div class="margiv-top-10">
<div class="col-md-4"><input type="submit" name="submitted" value="Save Changes" class="btn bg-green-meadow font-white compose-btn btn-block" autocomplete="false" /></div>
</div>
</div>
</div>
</form>
<script>
$(document).ready(function(){
    $('#summernote1').summernote({
        height: 200 , styleTags: ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'], toolbar: [
        ['style', ['style', ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']]],
        ['style', ['bold', 'italic', 'underline', 'clear', 'undo']],
        ['para', ['ul', 'ol']],
        ["view", ['fullscreen']]
        ]
    });
});
</script>

jQuery Validation Form:

var FormValidation = function() {
	var handleProfile = function() { 
        // http://docs.jquery.com/Plugins/Validation
		$.validator.addMethod("valueNotEqualsAbout", function () {
            $("#summernote1").val($('#myprofile .summernote').code());
            if ($("#summernote1").val() != "" && $("#summernote1").val().replace(/(<([^>]+)>)/ig, "") != "") {
                $('#summernote1').val('');
                return true;
            } else {
                return false;
            }
        }, 'This field is required.');
		var form1 = $('#myprofile');
		var success1 = $('.alert-success', form1);
        form1.validate({
            errorElement: 'span', //default input error message container
            errorClass: 'help-block help-block-error', // default input error message class
            focusInvalid: false, // do not focus the last invalid input
            ignore: "", // validate all fields including form hidden input
            rules: {
				firstname: {
                    minlength: 2,
                    maxlength: 150,
                    required: true
                },
				summernote1: {
					valueNotEqualsAbout: true
				}
            },
			messages: {
				summernote1: { valueNotEqualsAbout: 'Please add some information' }
			},
            highlight: function(element) { // hightlight error inputs
                $(element)
                    .closest('.form-group').addClass('has-error'); // set error class to the control group
            },
            unhighlight: function(element) { // revert the change done by hightlight
                $(element)
                    .closest('.form-group').removeClass('has-error'); // set error class to the control group
            },
            success: function(label) {
                label
                    .closest('.form-group').removeClass('has-error'); // set success class to the control group
            },
        });
    }
 	return {
        init: function() {
			handleProfile();
        }
    };
}();
jQuery(document).ready(function() {
    FormValidation.init();
});

Now, the forms validation works great for firstname but not the summernote editor. Nothing happens, for the summernote editor during the validation, even if it's empty but still gets submitted. Any help with sorting this would be greatly appreciated, thanks

[SteamingAlong]

Ok, guys. After lots of research, I have noticed that jQuery validator() does not use anything other than whats inside a FORM eg INPUT, SELECT, TEXTAREA ect, and requires a name value to be associated with them as an identifier.

 

However, there's a need to get the data from the hidden field of the contenteditable="true" area of a div inside the summernote editor and not the textarea itself. So regarding this, I had to setup a seperate jQuery that will just be used for the contenteditable areas, all works great now for one contenteditable area. If I have two of them which is not yet tested then I am sure I will have problems as there's no unique identifier for each one in these hidden fields.

 

Is there a way to keep each jQuery code within a forms ID so it can then be identified easily or how else would I be able to identify them even if I have 2 different contenteditable areas within the same form?

[SteamingAlong]

I ended up adding a unique hidden input id for each of these contenteditable area's which can now be identified and validated properly via client side validation.

 

If there's a better way, please let me know!