The text in ckeditor field is not sent when submitting forms for the first time (only on the second time, third time, etc).
For example, If try to create an article's post and submit the form I'll get a validation error: 'The field body is required'. If try to submit again (for the second time or third time), It will work well.
The real problem is when editing! For example, when editing a form the field 'body', among others fields, is filled out with the data from the database. In other words, there are already text in the ckeditor field.
If I try to submit the form for the first time it will not update the body because the text in the ckeditor is not sent; what is sent is the default value (the old article's body, which was filled out with data from the DB).
Therefore, it won't edit unless I get a validation error in other field (if I get a validation error, I'll have to submit again, and that will work).
How to solve this problem? Is this an known bug in CKEDITOR 4? If I don't solve it the users will feel frustrated if they have to submit the form at least twice to edit or to create an article.
Here is a list of plugins I'm using (may be useful to solve the problem):
a11yhelp, about, api, autocomplete, autocorrect, browser, clipboard, colordialog, copyformatting, crossereference, dialog, div, docprops, find, googlesearch, image, link, liststyle, magicline, mathjax, openlink, pastecode, pastefromword, preview, quicktable, scayt, section, showblocks, sourcedialog, specialchar, table, tableselection, tabletools, tabletoolstoolbar, texttransform, widget, wsc
By the way, I downloaded ckeditor using ckeditor builder in their official website.
I opened this issue in GitHub and a guy figured out the problem. His proposed solution worked wel!! Here is what he said:
Workaround
As the issue is more tricky to fix than it seems, for now I propose a
simple workaround: invoke ajaxRequest not on $( document ).ready,
but rather on editor's loaded event:
CKEDITOR.replace( 'editor', {
on: {
loaded: function() {ajaxRequest();}
}
});
Explanation of the issue
The issue is connected with how DOM listeners are registered for given
element:
The order of event listeners for a particular event type will always
be:
The event listeners registered with addEventListener() before the first time the event handler's value was set to non-null
Then the callback to which it is currently set, if any
Finally, the event listeners registered with addEventListener() after the first time the event handler's value was set to non-null.
In case of CKEditor 4, the value of the form's element is modified by
editor._attachToForm private method, which adds event listener to
form's submit event:
ckeditor-dev/core/editor.js form.on( 'submit', onSubmit );
However this listener is added on loaded event, which is fired
asynchronously when editor is loaded – so after registering
synchronous onsubmit handler with the validation logic. This way
editor's field is updated after validating.
Proposed solutions
Update editor's element on formdata event. This way we would have
total control over data being submitted and we would be sure that
correct data is set before submit event. The problem with this
solution is the fact that browsers' support is non-existent; the event
will appear in Chrome 77, however it is still not known if and when
the support will appear in Firefox or Safari.
Update editor's element on every change in the editor's content thanks
to change event. This solution will also fix cases, where some other
scripts are using value not from the editor, but directly from the
replaced textarea – they would get fresh data more often then only
after submitting the form. However this solution requires #1364, which
connects with a pretty big refactoring.
NOTE: AjaxRequest is the function I was using to submit the form togehter with Jquery.
Can someone help me with this line of code and tell me what it is looking for? This chunk of code is associated with a text box control on my page.
ValidationGroup="<%# ((TSAPassenger)((RepeaterItem) Container.Parent.Parent).DataItem).PaxKey %>" runat="server" ErrorMessage="Invalid Contact Name.">
When a postback occurs (via a button press, autopostback dropdown list, etc), ASP.NET will validate all inputs for the validation group specified on the control that caused the postback.
That line of code is grabbing the 'PaxKey' property of the data item for the repeater item two levels up in the control tree that contains the text box and using it to specify the validation group the textbox belongs to. This is likely there to limit the validation to just the fields for the record you're updating (as opposed to everything on the page).
I am creating an MVC3 website and added a couple of security questions to the "My MVC Application" Registration routine in the form of dropdown boxes. I created a custom validator to check the second dropdown box and if the selected item is the same as the first then it shows an error message.
My problem is that the clientside validation triggers as soon as the second dropdown box loses focus. After the error is displayed, ideally, I should be able to change the selection in the first dropdown box and the validation error message for the second dropdown box should go away. But, of course, changing the first dropdown box does not trigger the clientside validation routine for the second dropdown box and the error does not go away.
I would appreciate it if someone who is well versed with the internalls of unobstrosive Ajax validation routines would guide me to a solution so that when the selection of one dropdown box changes the validation routine of both dropdown boxes is triggered.
Thanks a bunch for any pointers.
If you look at this question and my answer, you will see code for client-side validation where changing one field will trigger validation on another field, and will then stop after both fields' validation has run.
I have an app that is using standard out of the box form validation so when a user clicks the submit buttons and there are required fields not filled in, the validation message pops up next to the empty field. This is great, however, because our form is quite long we also like to display the same error messages at the top of the page in a bulleted list or something. Is there a quick way to do that? I can't seem to find where the validation is getting triggered in the jquery code to add new code to it. Anyone have any suggestions?
Thanks,
Rhonda
I figured out a way to do this that was quite simple. I just put a div at the top of the page and put all the #Html.ValidationMessageFor(m => m.Email) for every field in that div. This way they show up in both places.
Rhonda
I am using "jQuery validation plug-in 1.7" for a page with form fields. The trouble is that the entire from is inside a rounded box created by using "CurvyCorners" plug-in. Since the error messages in my case appear below the form fields, the page size increases on appearance of each error message.
I am using 'curvyCorners.redraw();' on blur of each form element to achieve the page re-size. but every time it resizes the form fields loose focus and I am unable to tab properly in IE7 and below.
Any help would be highly appreciated
Can you please be specific about your error ?
And Try DD Roundies instead of curvy corners.