sponsorship: Show error message for the field under the field.

This commit is contained in:
Aman Agrawal 2023-11-04 03:11:30 +00:00 committed by Tim Abbott
parent 073d9bf3c9
commit 4fef63de52
3 changed files with 22 additions and 1 deletions

View File

@ -69,10 +69,12 @@
<div class="input-box sponsorship-form-field no-validation">
<label for="org-website" class="inline-block label-title">{{ _('Organization website') }}</label>
<input id="org-website" name="website" type="text" placeholder="{{ _('Leave blank if your organization does not have a website.') }}"/>
<div id="sponsorship-org-website-error" class="alert alert-danger sponsorship-field-error"></div>
</div>
<div class="input-box sponsorship-form-field">
<label for="description" class="inline-block label-title">{{ _('Describe your organization') }}</label>
<textarea id="description" name="description" cols="100" rows="5" required></textarea>
<textarea id="description" name="description" cols="100" rows="5"></textarea>
<div id="sponsorship-description-error" class="alert alert-danger sponsorship-field-error"></div>
</div>
<p id="sponsorship-discount-details"></p>
<!-- Disabled buttons do not fire any events, so we need a container div that isn't disabled for tippyjs to work -->

View File

@ -23,6 +23,15 @@ function create_ajax_request(): void {
data[item.name] = item.value;
}
// Clear any previous error messages.
$(".sponsorship-field-error").text("");
if (data.description.trim() === "") {
$("#sponsorship-description-error").text("Organization description cannot be blank.");
hide_submit_loading_indicator();
return;
}
void $.ajax({
type: "post",
url: "/json/billing/sponsorship",
@ -33,6 +42,10 @@ function create_ajax_request(): void {
error(xhr) {
hide_submit_loading_indicator();
if (xhr.responseJSON?.msg) {
if (xhr.responseJSON.msg === "Enter a valid URL.") {
$("#sponsorship-org-website-error").text(xhr.responseJSON.msg);
return;
}
$("#sponsorship-error").show().text(xhr.responseJSON.msg);
}
},

View File

@ -409,3 +409,9 @@ input[name="licenses"] {
.sponsorship-status-page p:last-child {
margin-bottom: 0;
}
.sponsorship-field-error {
text-align: left;
margin-left: 2px;
margin-top: 5px;
}