Add Feedback for select field in job forms

This commit is contained in:
Patrick Jentsch 2020-02-18 12:01:36 +01:00
parent 283fbca969
commit 54baa8633a
3 changed files with 17 additions and 4 deletions

View File

@ -31,7 +31,7 @@ def service(service):
if service == 'corpus_analysis': if service == 'corpus_analysis':
return render_template('services/{}.html.j2'.format(service), return render_template('services/{}.html.j2'.format(service),
title=SERVICES[service]['name']) title=SERVICES[service]['name'])
add_job_form = SERVICES[service]['add_job_form']() add_job_form = SERVICES[service]['add_job_form'](prefix='add-job-form')
if add_job_form.is_submitted(): if add_job_form.is_submitted():
if not add_job_form.validate(): if not add_job_form.validate():
return make_response(add_job_form.errors, 400) return make_response(add_job_form.errors, 400)

View File

@ -21,10 +21,23 @@ nopaque.foreignJobsSubscribers = [];
// nopaque functions // nopaque functions
nopaque.forms = {}; nopaque.forms = {};
nopaque.forms.init = function() { nopaque.forms.init = function() {
var abortRequestElement, progressElement, progressModal, var abortRequestElement, parentElement, progressElement, progressModal,
progressModalElement, request; progressModalElement, request, submitElement;
for (let form of document.querySelectorAll(".nopaque-job-form")) { for (let form of document.querySelectorAll(".nopaque-job-form")) {
submitElement = form.querySelector('button[type="submit"]');
submitElement.addEventListener("click", function() {
for (let selectElement of form.querySelectorAll('select')) {
if (selectElement.value === "") {
parentElement = selectElement.closest(".input-field");
for (let helperTextElement of parentElement.querySelectorAll(".helper-text")) {
helperTextElement.remove();
}
parentElement.insertAdjacentHTML("beforeend", `<span class="helper-text red-text">Please select an option.</span>`);
}
}
})
request = new XMLHttpRequest(); request = new XMLHttpRequest();
if (form.dataset.hasOwnProperty("progressModal")) { if (form.dataset.hasOwnProperty("progressModal")) {
progressModalElement = document.getElementById(form.dataset.progressModal); progressModalElement = document.getElementById(form.dataset.progressModal);

View File

@ -185,7 +185,7 @@
</div> </div>
</div> </div>
<div class="card-action right-align"> <div class="card-action right-align">
<button class="btn waves-effect waves-light" id="submit" name="submit" type="submit">Submit<i class="material-icons right">send</i></button> <button class="btn waves-effect waves-light" id="add-job-form-submit" name="add-job-form-submit" type="submit">Submit<i class="material-icons right">send</i></button>
</div> </div>
</form> </form>
</div> </div>