views:

44

answers:

0

I'm having some trouble getting the CKEditor html editor control to work with xVal.

For the most part, xVal is working great for me. I am able to set up the remote validations with ease, and get them to execute on the client side.

However, I recently added a CKEditor rich text editor textarea to my page and everything started to go pear shaped. The page would validate as expected when the form was submitted for the first time. However, even after correcting the validation errors, the errors would still be displayed on the page. Clicking the “Submit” button for the second time does nothing. Nothing is validated, and the form is not resubmitted.

The following is a description of what happens:

Scenario #1

I have 4 form fields. We’ll call them “Category”, “Email”, “Description” [this is the CKEditor], and “Captcha”

I have set up two remote validations to validate the “Category”, and the “Email” fields. They are very simple checks, i.e., I’m just checking to see if “Category” equals some string value, and that the “Email” equals some email value. These two validation methods are called “ValidateCategory” and “ValidateEmail”

I added the remote validation code to my Controller, and call out to these validations from my page as follows:

<%= 

Html.ClientSideValidation<Web.Models.PersonViewModel>()

.UseValidationSummary(“ValidationSummary”)

.AddRule(“Category”, new RemoteRule(Url.Action(“ValidateCategory”)))

.AddRule(“Email”, new RemoteRule(Url.Action(“ValidateEmail”)))

%>

The “Description” field in my form is a CKEditor represented by a simple textarea.

OK. All good so far.

My page renders as expected with the 4 fields, including the CKEditor.

I then enter data into the form.

I [purposely] enter a bogus “Category” and “Email”

The remote validations kick in, and the correct errors are displayed in the “ValidationSummary” div

I then enter something random into the CKEditor textarea.

And, enter the correct Captcha in the text box provided [aside: I am using the Captcha that you suggested in the brilliant Steven Sanderson book]

I then click the “Submit” button – knowing that there are validation errors to be fixed

I go about correcting the validation errors, entering the correct “Category” and “Email”, and try to submit the form again.

And, this is where it fails.

Even though I have corrected the validation errors, the errors are still displayed in the ValidationSummary and I can’t move on from here.

Scenario #2

If I don’t enter anything into the CKEditor text area, everything works fine, and as expected.

The remote validations kick in.

When I click the “Submit” button (for the first time) – the validation errors are displayed

When I correct them, the errors disappear one by one

When I click “Submit” for the second time, the form submits as expected

Conclusion

The only thing I can think of is that xVal does not like the html text being sent to it via the CKEditor text editor. When I enter something into this field, it all falls apart. When I leave it black, it works fine. Would anyone happen to know what the problem might be?

Thanks in advance