Validation fix for password protected pages with forms

TopicDetails.cshtml validation bug fix

If the user creates a page that is password protected, and that page contains a form with validations, the validations do not work.  We need to re-run the validation plugin after the content is loaded after successful authentication.

So we need to change this...

if (data.Authenticated) {
   $('#ph-topic #ph-title h1').html(data.Title);
   if ($('#ph-topic #ph-title h1').text().length == 0) {
      $('#ph-title').hide();
   }
   $('#ph-topic .page-body').html(data.Body);
   $('#ph-password').hide();
   $('#ph-topic').show();
}

to this...

if (data.Authenticated) {
   $('#ph-topic #ph-title h1').html(data.Title);
   if ($('#ph-topic #ph-title h1').text().length == 0) {
      $('#ph-title').hide();
   }
   $('#ph-topic .page-body').html(data.Body);
   $('#ph-password').hide();
   $('#ph-topic').show();
   //re-run the validation plugin in case the loaded html contained a form.
   $.validator.unobtrusive.parse("form");
}

Awesome work guys, keep it up!

Thanks,
Brad

Hi Brad,

Thanks! We'll investigate it

[email protected] wrote:

Hi Brad, I tried to repeat this error, but I could not. Now all the checks work well without the validator restarting . Which version of nopCommerce do you use?

Hi Sergei,
Thanks for the reply.  I'm using 3.80.  Here are the steps to reproduce this issue:

Content Management --> Topics --> Add New

Make sure "Password Protected" is checked.

In the Body, click Tools --> Source Code.

Paste in a form with validations like the one below...

<form action="MyWebApiUrl" method="post" novalidate="novalidate">
  <div class="fieldset">
    <div class="form-fields">
      <div class="title"><strong>Sign Up!</strong></div>
      <div class="inputs">
        <label for="Name">Name</label> 
        <input class="text-box single-line" name="Name" type="text" data-val="true" data-val-required="Name is required." /> 
        <span class="required">*</span> 
        <span data-valmsg-for="Name" data-valmsg-replace="true">&nbsp;</span>
      </div>
      <div class="inputs">
        <label for="Email">Email</label> 
        <input class="text-box single-line" name="Email" type="text" data-val="true" data-val-email="Wrong email address." data-val-required="Email is required." />
        <span class="required">*</span> 
        <span data-valmsg-for="Email" data-valmsg-replace="true">&nbsp;</span>
      </div>
      <div class="buttons" style="text-align: center;">
        <span class="registration-page"> <!-- Not the registration page, but needed for the styling -->
          <input class="button-1 save-customer-info-button" name="save-info-button" type="submit" value="Subscribe" />
        </span>
      </div>
    </div>
  </div>
</form>

Since the validation plugin was run on the document ready event, and this content will be loaded via ajax after the document has loaded (after the user enters the correct password for this page), the validations will not work.  The validation plugin needs to be called again in the ajax success callback, after this content has been loaded into the DOM.

Hi Brad. Thank you very much, your example helped to understand the problem. I made the necessary changes; you can look at them in this commit.

Thank you very much!