Required attribute

[chrisveness]

If I put a 'required' attribute on the textarea, I get an error

An invalid form control with name='MyID' is not focusable."

when I submit the form.

[WesCossick]

SimpleMDE hides the textarea, so that would be as expected. Instead of a required attribute, try implementing some form of JS validation that checks to see if SimpleMDE has been filled out.

[kraiz]

I had this problem within Chrome too. It seems to prevent SimpleMDE syncing the content to the hidden textarea before the submit event happens. Works fine with the forceSync option:

var simplemde = new SimpleMDE({
    forceSync: true
});

[WesCossick]

@kraiz This won't work fully either, because if the content is empty, it'll result in the same error shown above. The problem is that the textarea is hidden. A JS approach is necessary.

[MatthewBooth]

This still seems like a bit of an oversight to be honest. Instead of requiring users to add extra JS to validate a form, something should be done within the library to alleviate this.

Especially if using a form factory like Symfony or Laravel, where you want this all to be done in code, in one place.

[WesCossick]

@MatthewBooth there are hundreds of different ways to validate an input and display an error, whether before, during, or after submission. SimpleMDE's job is not to determine how to do that for the developer.

[chrisveness]

Would it not be possible for SimpleMDE to remove any 'required' attribute from the text area and apply it to the markdown control? It's a while since I looked at this, perhaps it wouldn't work, but it seems like it could be workable.

[WesCossick]

@chrisveness SimpleMDE would not know what to do if it was left blank, since an error message can be displayed in so many ways. It's up to the developer to not rely on the required attribute and to instead build their own JS based implementation that matches the rest of their form's validation and error display.

[landart]

There is a very simple workaround for this problem.

What I'm using mostly is HTML5 validation, so I rely on the browser to know how to display the validation message - and then, if I wanted to, but not necessarily, I could add some JS on top of it, but that's another question.

So, the thing is, SimpleMDE creates its own textarea to keep the widget's value, and hides the original textarea. By simple removing the required attribute from the latter, and adding it to the former (which is displayed, but behind the actual editor box), the HTML5 validation works just fine.

$('#original-text-area').attr('required', false); $('.CodeMirror textarea').attr('required', true);

It's not pretty, and it's just basic browser styles in there, but it works. Maybe you guys should consider adding this behavior by default to SimpleMDE, then let the developer choose what CSS rules they want in order to display the error messages in a more specific way. I hope this helps!

[chrisveness]

@landart, yes, that's the sort of thing I had in mind.

It could perhaps be generalised along the lines of (roughly)

const originalElement = document.querySelect('#original-text-area');
const mirrorElement = document.querySelect('.CodeMirror textarea');

const validationAttributes = [ 'required', 'pattern', 'min', 'max' ]; // etc

for (const attr of originalElement.attributes) {
    if (validationAttributes.includes(attr.name) {
        mirrorElement.attr.name = attr.value;
        originalElement.attr.name = undefined;
    }
}

@WesCossick I think this could make the library much more valuable: there's so many reasons to want to use native browser validation functions, not to try to reinvent the wheel with homegrown JS validation...

Edit: it's a while since I was looking at this, I'm not sure what validation other than required might be relevant.