Commit 1c4c3c70 authored by Mohamed Hernouf's avatar Mohamed Hernouf
Browse files

JS script that pre-fills registration mail, checks inputs validity and reports...

JS script that pre-fills registration mail, checks inputs validity and reports if one of them is invalid
parent a0def7aa
......@@ -4,22 +4,22 @@
Registration form to participate in the training courses.
<form id="registration" onsubmit="return validateFormOnSubmit();">
<label for="fcourse">Course:</label><br>
<select class="small-text" id ="fcourse">
<option>OCaml Development</option>
<option>OCaml Expert</option>
<option>OCaml Code Optimization</option>
<option>Rust Vocational Training</option>
<option>Mastering OPAM &amp; OCaml Tools</option>
<option class="course">Custom Training</option>
<option value="OCaml Development">OCaml Development</option>
<option value="OCaml Expert">OCaml Expert</option>
<option value="OCaml Code Optimization">OCaml Code Optimization</option>
<option value="Rust Vocational Training">Rust Vocational Training</option>
<option value="Mastering OPAM & OCaml Tools">Mastering OPAM &amp; OCaml Tools</option>
<option value="Custom Training">Custom Training</option>
<label for="fname">Name:</label><br>
<input class="small-text" type="text" id="fname" name="fname"><br>
<input class="small-text" type="text" id="fname" name="fname" onkeyup="return updateInput(this)"><br>
<label for="femail">Email:</label><br>
<input class="small-text" type="email" id="femail" name="femail"><br>
<input class="small-text" type="email" id="femail" name="femail" onkeyup="return updateInput(this)"><br>
<label for="ftel">Telephone:</label><br>
<input class="small-text" type="tel" id="ftel" name="ftel"><br>
<input class="small-text" type="tel" id="ftel" name="ftel" onkeyup="return updateInput(this)"><br>
<small><span id="warning">Warning</span> : this pre-registration will only be confirmed upon signature of the training agreement by both sides.</small><br>
<input type="submit" value="Send">
......@@ -35,4 +35,59 @@ Registration form to participate in the training courses.
.invalid-input {
background-color: #ffa5a5;
/* converts input to a valid string */
function validInput(str) {
return encodeURIComponent(str.trim());
/* sends pre-filled mail to */
function mailto(name,email,tel){
let new_line = "%0D%0A";
let course = document.getElementById("fcourse").value;
let subject = course + " pre-registration by " + name;
let body =
"Name: " + name + new_line +
"Email: " + email + new_line +
"Telephone: " + tel;
let url =
"" + subject + "&body=" + body;;
/** form onsubmit handler */
function validateFormOnSubmit() {
let nameInput = document.getElementById("fname");
let name = validInput(nameInput.value);
/* Colors input to colar color if input is empty */
if(!name) {
let emailInput = document.getElementById("femail");
let email = validInput(emailInput.value);
if(!email) {
let telInput = document.getElementById("ftel");
let tel = validInput(telInput.value);
if(!tel) {
if (name && email && tel) {
return false;
/** Updates input color when entering new letter */
function updateInput(input) {
return false;
\ No newline at end of file
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