K13 Form Validation Error Messages Not Displaying

Robert Bell asked on March 26, 2025 17:50

We are testing K13, 13.0.165, getting ready to migrate from K12. I'm looking at Forms and have an issue with field validation not showing error messages. Below is a simple form with one field that has a validation number must be greater than 10. The form will not submit, but the validation error is not display to let the user know why.

In K12 the displayValidationErrors=False goes to True and the validation messages are shown. On the K13 site I do not see any change in the form and the browser dev tools displays no exceptions.

I found a Q&A on changes needed for required fields but have yet to find anything on validation messages.

Can someone tell me if I need to write any code for this or is there an option somewhere that I am missing?

Thanks in advance.

Before Submit:

<div id="form-Test-c6be_wrapper-90555b04-0915-47ce-8f2e-73d486d3dd3a">
    <form action="/Kentico.Components/en-US/Kentico.FormWidget/KenticoFormWidget/FormSubmit? 
       formName=Test&amp;prefix=form-Test-c6be&amp;displayValidationErrors=False" data-ktc-ajax- 
       update="form-Test-c6be_wrapper-90555b04-0915-47ce-8f2e-73d486d3dd3a" id="form-Test-c6be" 
        method="post" onsubmit="window.kentico.updatableFormHelper.submitForm(event);">
         <div class="ktc-default-section">
              <div class="form-field">
                   <label class="control-label" for="form-Test-c6be_fourdigits_Number">4 
                      Digits</label>
                    <div class="editing-form-control-nested-control">
                         <input class="form-control" data-ktc-notobserved-element="" id="form-Test- 
                            c6be_fourdigits_Number" name="form-Test-c6be.fourdigits.Number" 
                            type="text" value="">
                          <div class="field-validation-valid" data-valmsg-for="form-Test- 
                             c6be.fourdigits.Number" data-valmsg-replace="true">
                           </div>
                           <div class="field-validation-valid" data-valmsg-for="form-Test- 
                              c6be.fourdigits" data-valmsg-replace="true">
                           </div>
                     </div>
               </div>
          </div>
    <input type="submit" value="Submit">
    <input name="__RequestVerificationToken" type="hidden" 
       value="CfDJ8KPgP3von8RDjpSGr2mfaW_ptvPwVvsYZbSnsKkhGYifnYdGhO2ArRofHOyFrCjPq- 
       QCnkbjJzXkRkcIf4LSva0OC-BjTNxAv45oYkzbB7xGxESO7OjUOwp3pDXUvvtRlRlgQQIb9jaxCsULkKlL9rc">
    Script code here...
    </form>
</div>

After Submit:

<div id="form-Test-c6be_wrapper-90555b04-0915-47ce-8f2e-73d486d3dd3a">
     <form action="/Kentico.Components/en-US/Kentico.FormWidget/KenticoFormWidget/FormSubmit? 
       formName=Test&amp;prefix=form-Test-c6be&amp;displayValidationErrors=False" data-ktc-ajax- 
       update="form-Test-c6be_wrapper-90555b04-0915-47ce-8f2e-73d486d3dd3a" id="form-Test-c6be" 
        method="post" onsubmit="window.kentico.updatableFormHelper.submitForm(event);">
          <div class="ktc-default-section">    
               <div class="form-field">
                    <label class="control-label" for="form-Test-c6be_fourdigits_Number">4 
                       Digits</label>
                         <div class="editing-form-control-nested-control">
                              <input class="form-control" data-ktc-notobserved-element="" id="form- 
                                 Test-c6be_fourdigits_Number" name="form-Test-c6be.fourdigits.Number" 
                                 type="text" value="">
                               <div class="field-validation-valid" data-valmsg-for="form-Test- 
                                  c6be.fourdigits.Number" data-valmsg-replace="true">
                               </div>
                               <div class="field-validation-valid" data-valmsg-for="form-Test- 
                                  c6be.fourdigits" data-valmsg-replace="true"></div>
                               </div>
               </div>
                </div>
            <input type="submit" value="Submit">
        <input name="__RequestVerificationToken" type="hidden" 
               value="CfDJ8KPgP3von8RDjpSGr2mfaW_ptvPwVvsYZbSnsKkhGYifnYdGhO2ArRofHOyFrCjPq- 
               QCnkbjJzXkRkcIf4LSva0OC-BjTNxAv45oYkzbB7xGxESO7OjUOwp3pDXUvvtRlRlgQQIb9jaxCsULkKlL9rc">
         Script code here...
     /form>
</div>

form validating

Correct Answer

Robert Bell answered on April 9, 2025 16:37

Thanks to everyone that responded. You helped me narrow down my search and I found the issue I was having.

I'm using updatableFormHelper.js and found this line that needed to be updated.

Orignial:

        var elementIdSelector = form.getAttribute("data-ktc-ajax-update");
        if (!elementIdSelector) {
            return;
        }
        
        ...
        
        $(elementIdSelector).replaceWith(event.target.responseText);

Fix

        var elementIdSelector = form.getAttribute("data-ktc-ajax-update");
        if (!elementIdSelector) {
            return;
        }
        
        ...
        
        $('#' + elementIdSelector).replaceWith(event.target.responseText);

0 votesVote for this answer Unmark Correct answer

Recent Answers

Joel Dahlin answered on March 26, 2025 21:11

Do you have the builder scripts in your layout?

<page-builder-scripts />

0 votesVote for this answer Mark as a Correct answer

Robert Bell answered on March 26, 2025 22:59

Hi Joel,

Thanks for responding. Yes, verified that the page builder scripts is in the layout file.

0 votesVote for this answer Mark as a Correct answer

John Lougee answered on March 27, 2025 18:04

Hi Robert,

Are you trying this one the live site rather than on preview mode in the pages application? It should be tested on the live site as there can be some issues with this if you try submitting it thru preview: https://docs.kentico.com/13/managing-website-content/forms/placing-forms-on-pages#forms-in-preview-mode

Is this using the default Minimum value rule or is it one you developed yourself? I'm assuming you are using a numeric input component for this?

Have you tried this in an incognito window to make sure there are no extensions interfering?

0 votesVote for this answer Mark as a Correct answer

Robert Bell answered on March 27, 2025 21:21

Hi John,

Testing on the live site using the built in numeric input component and Minimum value rule. Incognito mode makes no difference in the operation.

Have the Min value set to 10. Less than 10 the form will not submit but also does not show the validation message, 10 or more and it will submit and redirects me to the home page, as expected.

What has me puzzled is why the form action displayValidationErrors is always false. On the K12 site it is true after the submit button is pressed.

I'm wondering if I have missed some type of configuration that would enable validation messages.

I have this in the layout file:

$.validator.setDefaults({ debug: true, errorClass: "invalid", submitHandler: function() { alert("Submitted!") } });

This is the script loaded with the form:

<script type="text/javascript">
if (document.readyState === 'complete') {
  window.kentico.updatableFormHelper.registerEventListeners({"formId":"form-Test-4c79","targetAttributeName":"data-ktc-ajax-update","unobservedAttributeName":"data-ktc-notobserved-element"});
} else {
    document.addEventListener('DOMContentLoaded', function(event) {
      window.kentico.updatableFormHelper.registerEventListeners({"formId":"form-Test-4c79","targetAttributeName":"data-ktc-ajax-update","unobservedAttributeName":"data-ktc-notobserved-element"});
    });
}
</script>

0 votesVote for this answer Mark as a Correct answer