Currently, I am utilizing a jQuery ajax() call to fetch a response from a PHP page for form submission/validation purposes. Upon success, the response contains a list of form elements along with corresponding error messages (such as missing field or invalid input).
Subsequently, jQuery is used again to iterate through each form element received from the ajax call and modify their CSS properties (imported via) - like changing the border color to red to indicate an error with that specific element.
This process functions effectively. However, consider a scenario where I submit the form with a missing field - ajax triggers the call and updates the page's CSS to highlight the field in red. Now, assuming I rectify the issue with that particular field (by providing valid data) and re-submit the form with a different field empty. While the new missing field correctly gets highlighted in red, the previous field's red border remains unchanged upon resubmission. In essence, once the red border appears, it cannot be cleared.
I am contemplating the necessity of implementing a "reload CSS" function in JavaScript to refresh the CSS post-ajax call...or something similar? I am unsure about this approach. It seems like a common requirement, though. After researching, it appears caching the page might have some relevance, but I lack control over such aspects.
It should be noted that I am using Less CSS. Any assistance would be greatly appreciated.