html5 validation don't work

[KernelFolla]

html5 validation (required="required" for example) don't work. this appens because the original field is hidden.

this is my workaround, I hope it can be useful:)

    jQuery('.wysihtml5').wysihtml5({
        "events":      {
            "load": function () {
                jQuery('.wysihtml5').addClass('nicehide');
            }
        }
    });

.nicehide {
    resize: none;
    display: block !important;
    width: 0;
    height: 0;
    margin: 0 0 0 -15px;
    float: left;
    border: none;
}

[fabicurti]

THAAAAAAAAAAAAAAAAAAAAAAAAAAAANK YOU! I was going crazy trying to find a way to do this!

[fabicurti]

Found a PERFECT way to do the job.. here´s the code :)

I know the question is old, but maybe help somebody looking for this..

To make the JQuery Validation work with WysiHtml5, just set the plugin to not ignore hidden textareas:

$('#form').validate({ ignore: ":hidden:not(textarea)",
rules: {
WysiHtmlField: "required" }, submitHandler: function(form) { ... } });

[kargaa]

Only @KernelFolla 's solution worked for me, I also use, bootstrapwizard steps.

@KernelFolla now it shows 2 text areas vertically, I tried to fix it by margin-top:-150 but in one they can't stick togetler, other steps are fine, I getting crazy one stupid validation took my all night :)

Is there any way to hide iframe ara below textarea?

ignore: ":hidden:not(textarea)",

doesnt even work in any case with "" or else , wizard blows up.

[kargaa]

Ok last solution thanks to @KernelFolla , I added visibility attiribute to hide, div so it works now.

.nicehide { resize: none; display: block !important; width: 0; height: 0; margin: -200px 0 0 0; float: left; visibility:hidden; }

[dubwise]

@KernelFolla & @kargaa

You sir are a legend, thanks, was doing my head in trying to figure this out.

[edit] Does not work when used with responsive template.

[KernelFolla]

for me it works with responsive template but i've done a variant for multiple textarea

    jQuery(obj).wysihtml5({
       ...
    }).filter('[required]').addClass('nicehide');

[jorgelbg]

This works almost fine, if you hit the submit button before writing anything in the wysihtml5 editor, it popups the required message, but then even if you fill the wysihtml5 editor with text the message doesn't go away until you submit (again) the form. Any workaround?

[BonceSkip]

thanks you! saved my life...

[efkan]

Thank you @KernelFolla ! You've made my day! :smiley:

I wanna contribute a little bit to your solution. This is my styles;

.nicehide {
    display: block !important;
    position: absolute; /*Keep the object's original position*/
    width: 0 !important; /*It should be 0 width. Otherwise the object seems underneath of the editor */
    z-index: -1; /*Send the object to the bottom layer*/
}

[BIackSouL]

@KernelFolla where shloud i put the class .nicehide and the jquery function help me please

[Assem]

Thank you @efkan , your css was the one that worked for me :) and thks @KernelFolla for the idea ;)