Есть ли способ показать (используя CSS) определенные c деления на основе результата (успеха, ошибки) отправки формы? Я пытаюсь отработать пример достижения этой цели, но с переменным успехом.
Вот настройка формы (я использую формы Ghost CMS, которые объясняют плавающее data-members-form):
<form data-members-form>
<input data-members-label type="hidden" value="Free" />
<input data-members-email type="email" required="true" placeholder="jenny.doe@example.com"
class="w-full appearance-none rounded border shadow p-3 text-grey-dark mr-2 focus:outline-none">
<button
class="w-full p-2 mt-5 py-5 bg-primary-600 text-white font-medium rounded hover:bg-primary-800 hover:font-semibold">
<span class="button-content">Sign Up for Free</span>
<span class="button-loader text-white">{{> "icons/loader"}}</span>
</button>
<div class="form-response-messages">
<div class="form-success bg-green-300 text-green-800 border-green-900 border rounded-lg my-5 p-5">Awww yeah,
Success! Please check your email to login.</div>
<div class="form-error bg-red-300 text-red-800 border-red-900 border rounded-lg my-5 p-5">Oh no! Looks like
there was an error. Please try again.</div>
</div>
</form>
Вот это CSS:
form[data-members-form] .form-response-messages {
display: none;
}
/*-- Show success message on success --*/
form[data-members-form].success .form-response-messages .form-success {
display: block;
}
/*-- Show error message on error --*/
form[data-members-form].error .form-response-messages .form-error {
display: block;
}
В противном случае, какой будет лучший способ в jQuery для отображения элементов на основе их ответа?