Parsley Validation - ASP.NET form with update panel - asp.net

Question

I am working on a legacy asp.net web forms application. I am upgrading an existing form to have a new visual style, and to use parsley validation.
We previously used the webforms validation controls, but we upgraded to parsley, as it gives a nicer user experience, and allows the control being validated to be styled when validation fails (in our case, puts a red cross graphic as the background of the input box)
The form has an update panel, for postcode / address lookup. User enters their postcode, and clicks the "Find address" button, which triggers the postback within the update panel.. I've been able to separate the two form sections (main form validation, and just the postcode input) such that user is only prompted to complete the postcode when clicking "Find Address" (using data-parsley-group="postcode" on the input box and button). I added an onclient click event to the button, to trigger the validation before triggering the onClick event of the button. See below snippets.
<asp:ImageButton ID="addressLockup" runat="server" ImageUrl="/images/btn-find-address-off.gif" class="rollover" OnClientClick="return ValidatePostcode()" OnClick="Lookup_btn_Click" CausesValidation="false" data-parsley-group="postcode" />
function ValidatePostcode() {
console.log("do postcode validaiton");
if (true === $('#aspnetForm').parsley("postcode").validate("postcode", true)) {
return true;
}
return false;
}
Now, onto my issue:
As said before, it correctly validates that the postcode has been entered, showing the red cross only in the postcode input box if that validation fails.
However, once the postcode is correctly entered, and user clicks the button, it correctly triggers the onClick event, but at this point, all the other parsley validated input boxes that haven't get been correclt filled in, show the parsley-error state (showing the red cross in my case)..I've been able to clear these once postback is complete, but you briefly see the red crosses flash, which the client won't accept..
What can I do to prevent all the other form controls showing when OnClick event fires? I'm guessing it's because it's submitting the form at this point..
Thanks for reading,
Danny

Answer 1

I have found a workground for this, by changing the parsley-error style before the postback occurs, and then removing the parsley-error styles from all controls, changing back the parsley-error style once page reloads:
A bit hacky, but it works.. If someone has a better solution though, it would be great to hear it!
function ValidatePostcode() {
console.log("do postcode validaiton");
if (true === $('#aspnetForm').parsley("postcode").validate("postcode", true)) {
var style = '<style type="text/css">#accountRegisterContainer input.parsley-error {background: url(""); background-color: #ffffff;}#accountRegisterContainer select.parsley-error { background: url("") ;background-color: #ffffff;}</style>';
$("head").append(style);
return true;
}
return false;
}
function pageLoad(sender, args) {
$(".parsley-error").removeClass("parsley-error");
var style = '<style type="text/css">#accountRegisterContainer input.parsley-error {background: url("/Images/parsley-cross.png") no-repeat right 10px center;; background-color: #ffffff;}#accountRegisterContainer select.parsley-error { background: url("/Images/parsley-tick.png") no-repeat right 10px center;background-color: #ffffff;}</style>';
$("head").append(style);
}