Skip to content

C
clinicaltrials
Commit ddc64b35 authored by Romain Loth's avatar Romain Loth
Browse files
Options

better layout for various validation messages

parent aad12603
Hide whitespace changes
Inline Side-by-side
Showing with 93 additions and 69 deletions
static/css/comex_reg.css
View file @ ddc64b35
......@@ -28,6 +28,14 @@
}
.cartouche {
border: .4em dotted #988 ;
border-radius: 2em;
padding: 1em 3em;
text-align: center;
}
/* ==> a question + input block <== */
.question {
padding: 0 1em;
......@@ -55,13 +63,6 @@
min-width: 7.5em;
}
/* the main validation message (a special legend) */
#main_validation_message {
font-size: 200%;
text-align:center;
/*color: #554 ;*/
}
/* the question's additional legend or caption */
.legend {
font-family: Cambria, serif;
......@@ -99,12 +100,16 @@ h3.formcat {
margin-top: 2em;
}
h3.formcatfirst {
margin-top: .5em;
}
.spacerrow {
height: 4em;
height: 2em;
}
.bigspacerrow {
height: 50em;
height: 15em;
}
.realperson-challenge {
......@@ -116,9 +121,6 @@ h3.formcat {
.realperson-regen {
color: #554 ;
}
.bigspacerrow {
height: 50em;
}
.raw-responses {
font-family: Calibri, sans-serif ;
......@@ -128,3 +130,22 @@ h3.formcat {
color: white;
padding-bottom: 3em
}
/* the main validation message (a special legend) */
#main_validation_message {
font-size: 200%;
text-align:center;
/*color: #554 ;*/
}
ul.minilabels {
padding-top: .5em;
list-style-type: none;
font-size: 75% ;
}
li.minilabel {
font-weight: bold ;
}
static/js/comex_reg_form_controllers.js
View file @ ddc64b35
......@@ -382,7 +382,7 @@ function validateSubmit(wholeFormData, doorsResp) {
// console.log("actualValue", actualValue)
// test mandatory -----------------
if (mandatory && actualValue == null && actualValue != "") {
if (mandatory && (actualValue == null || actualValue == "")) {
// todo human-readable fieldName here
missingFields.push(fieldName)
valid = false
......@@ -433,20 +433,16 @@ function validateSubmit(wholeFormData, doorsResp) {
else {
console.warn("form is not valid")
// TODO better user message
// TODO highlight invalid fields
submitButton.disabled = false
var errorMessage = ""
var errorMessage = ''
if (missingFields.length) {
errorMessage += "<br/>Please fill the missing fields: " + JSON.stringify(missingFields)
}
// TODO should be handled question by question
if (toolongFields.length) {
errorMessage += "<br/>Please shorten the following fields: " + JSON.stringify(toolongFields)
errorMessage += "Please fill the missing fields: " + ulListFromLabelsArray(missingFields, ["red"])
}
// length is handled by each input's maxlength
// display (TODO setTimeout and fade)
mainMessage.innerHTML = errorMessage
return false
......@@ -456,7 +452,16 @@ function validateSubmit(wholeFormData, doorsResp) {
}
function ulListFromLabelsArray(strArray, ulClassList) {
ulClasses=["minilabels"].concat(ulClassList).join(" ")
var resultHtml = '<ul class="'+ulClasses+'">'
for (var i in strArray) {
var label = strArray[i].replace(/_/, " ")
resultHtml += '<li class="minilabel">'+label+'</li>'
}
resultHtml += '</ul>'
return resultHtml
}
var fileInput = document.getElementById('pic_file')
......@@ -620,16 +625,16 @@ var passwords = [pass1, pass2]
// £DEBUG autofill ----------->8------
first_name.value = "Jean"
last_name.value = "Tartampion"
initialsInput.value="JPP"
document.getElementById('country').value = "France"
email.value= makeRandomString(10)+"@om.fr"
pass1.value="123456+789"
pass2.value="123456+789"
document.getElementById('jobtitle').value = "atitle"
document.getElementById('keywords').value = "Blabla"
document.getElementById('institution').value = "CNRS"
// first_name.value = "Jean"
// last_name.value = "Tartampion"
// initialsInput.value="JPP"
// document.getElementById('country').value = "France"
// email.value= makeRandomString(10)+"@om.fr"
// pass1.value="123456+789"
// pass2.value="123456+789"
// document.getElementById('jobtitle').value = "atitle"
// document.getElementById('keywords').value = "Blabla"
// document.getElementById('institution').value = "CNRS"
// --------------------------->8------
......
templates/base_form.html
View file @ ddc64b35
......@@ -91,7 +91,7 @@
<div class="subpage" id="subpage_1" style="display:block">
<!-- NAME & COUNTRY -->
<h3 class="formcat"> Basic infos </h3>
<h3 class="formcatfirst"> Basic infos </h3>
<div class="question input-group">
<label for="first_name" class="smlabel input-group-addon">
......@@ -266,7 +266,7 @@
<div class="subpage" id="subpage_2">
<!-- OTHER PERSONAL INFO -->
<h3 class="formcat"> Complementary information </h3>
<h3 class="formcatfirst"> Complementary information </h3>
<div class="question">
<div class="input-group">
......@@ -321,9 +321,9 @@
</div>
<!-- CNIL WARNING -->
<h3 class="formcat"> About your data </h3>
<div class="question" id="cnil_warning">
<h3 class="formcat"> About your data </h3>
<div class="cartouche" id="cnil_warning">
<p>Les informations recueillies à partir de ce formulaire font l’objet d’un traitement
informatique destiné à: </p>
<p><strong>communityexplorer.org</strong></p>
......@@ -339,15 +339,11 @@
loi « informatique et libertés » du 6 janvier 1978 modifiée</a>,
vous disposez d’un <a href="https://www.cnil.fr/fr/le-droit-dacces">droit d’accès</a>
et <a href="https://www.cnil.fr/fr/le-droit-de-rectification">de rectification</a>
aux informations qui vous concernent.
</p>
<p>Vous pouvez accèder aux informations vous concernant en vous adressant à :</p>
aux informations qui vous concernent, en vous adressant à :</p>
<p class="rtecenter"><strong>todo@iscpif.fr</strong></p>
<p>Vous pouvez également, pour des motifs légitimes,
<a href="https://www.cnil.fr/fr/le-droit-dopposition">vous opposer au traitement
des données vous concernant</a>.
</p>
<p>Pour en savoir plus, <a href="https://www.cnil.fr/fr/comprendre-vos-droits">
des données vous concernant</a>. Pour en savoir plus, <a href="https://www.cnil.fr/fr/comprendre-vos-droits">
consultez vos droits sur le site de la CNIL</a>.
</p>
</div>
......@@ -377,36 +373,40 @@
<input id="my-captchaHash" name="my-captchaHash" type="text" hidden>
</input>
<div class="row spacerrow">&nbsp;</div><div class="row spacerrow">&nbsp;</div>
<!-- CAPTCHA & SUBMIT BTN + INFOS-->
<h3 class="formcat">Verify and submit</h3>
<div class="subpage" id="subpage_3" style="display:block">
<div class="row spacerrow">&nbsp;</div>
<!--pseudo captcha using realperson from http://keith-wood.name/realPerson.html -->
<p class="legend">(A challenge for spam bots)</p>
<div class="question input-group">
<label for="my-captcha" class="smlabel input-group-addon">Code</label>
<input id="my-captcha" name="my-captcha" style="max-width:60%"
type="text" class="form-control input-lg" placeholder="Enter the 5 letters you see beside =>"
onblur="makeBold(this)" onfocus="makeNormal(this)">
</div>
<!-- main validation message -->
<p id="main_validation_message" class="legend" style="display:none"></p>
<div class="row spacerrow">&nbsp;</div>
<!-- == S U B M I T == -->
<!-- button instead of input.submit to validate before real submit action -->
<!-- also remember stackoverflow.com/a/3315016/2489184 -->
<button class="btn btn-lg btn-success" style="float:right"
id="formsubmit" type=button
onclick="registerDoorsAndSubmit(event)">
Submit your form
</button>
<!-- CAPTCHA & SUBMIT BTN + INFOS-->
<h3 class="formcat">Verify and submit</h3>
<!-- main validation message -->
<p id="main_validation_message" class="legend" style="display:none"></p>
<!--pseudo captcha using realperson from http://keith-wood.name/realPerson.html -->
</form>
<p class="legend">(A challenge for spam bots)</p>
<div class="question input-group">
<label for="my-captcha" class="smlabel input-group-addon">Code</label>
<input id="my-captcha" name="my-captcha" style="max-width:60%"
type="text" class="form-control input-lg" placeholder="Enter the 5 letters you see beside =>"
onblur="makeBold(this)" onfocus="makeNormal(this)">
</div>
<!-- == S U B M I T == -->
<!-- button instead of input.submit to validate before real submit action -->
<!-- also remember stackoverflow.com/a/3315016/2489184 -->
<button class="btn btn-lg btn-success" style="float:right"
id="formsubmit" type=button
onclick="registerDoorsAndSubmit(event)">
Submit your form
</button>
</form>
</div>
<!-- FOR DEBUG: test go-between with Doors -->
<!-- <p>
......@@ -425,8 +425,7 @@
<div class="spacer col-sm-2 col-md-2">&nbsp;</div>
</div>
<div class="row spacerrow">&nbsp;</div>
<div class="row spacerrow">&nbsp;</div>
<div class="row bigspacerrow">&nbsp;</div>
<!-- FOOTER TEXT AND LINKS -->
<footer>
......
templates/thank_you.html
View file @ ddc64b35
......@@ -86,8 +86,7 @@
<p> {{key}} {{records[key]}} </p>
{% endfor %}
<h5>debug message</h5>
<p>
<p style="font-family: monospace; font-weight: bold">
{{message|safe}}
</p>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment