I've been using the Parsley validator for a while now and I'm really happy with it. Though, I've ran into a little bit of trouble, which I really can't figure out.
The problem is this: My textarea, which is replaced with Summernote, doesn't validate. Let me clearify first, because I know what the problem is, but I can't figure out an answer.
In my CMS, the user can edit the text of a page through Summernote. When the page is loaded, the text will appear in the editor. When looking in my source code, I see this:
<textarea name="content" class="summernote" required data-parsley-required>[The page information is shown, but I removed it because it it too long and unrelated to this topic.]</textarea>
When I edit the text, it validates as normal. BUT! When I delete my text and submit the form when the editor is empty, it will also validate. It simply process the form and when the page reloads, it will show no text. Logically the textarea field is empty.
The problem here is when the page loads and the textarea has content, the validation of the textarea will see this as not empty, thus submitting my form. Instead I want to validate the ACTUAL textarea, where the class name is note-editable.
When the texteditor is empty, it will always say it's empty. Even when I put some text in the editor, it will not submit, simply because on page load, the textarea has no content.
So my question is: How do I prevent users to submit an empty textfield with Parsley, when I'm using Summernote? So when the user removes the text from the editor, the form won't submit and the user get an error saying the textfield is empty.
Many thanks!
~ Michiel
I made this simple custom function that worked for me.
<textarea id="mySummernote" name="mySummernote" data-parsley-summernote-required="" data-parsley-errors-container="#myErrors"></textarea>
<div id="myErrors"></div>
<script type="text/javascript">
window.Parsley.addValidator('summernoteRequired', {
validateString: function(value,_value,_el) {
var val = $($(_el.$element[0]).val()).text().trim();
if(val.length<1) return false;
},
messages: {
en: 'This is a required field.',
it: "Questo valore è richiesto."
}
});
</script>
Hope this can be helpful for you. :)