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

src/content/course_register.md

@@ -4,22 +4,22 @@
 Registration form to participate in the training courses.
 
 <hr>
-<form>
+<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>
   </select><br>
   <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">
 </form>
@@ -35,4 +35,59 @@ Registration form to participate in the training courses.
 #warning{
     color:red;
 }
+
+.invalid-input {
+    background-color: #ffa5a5;
+}
 </style>
+
+<script>
+/* converts input to a valid string */
+function validInput(str) {
+    return encodeURIComponent(str.trim()); 
+}
+
+/* sends pre-filled mail to contact@ocamlpro.com */
+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 =
+        "mailto:contact@ocamlpro.com?subject=" + subject + "&body=" + body;
+    window.open(url);
+}
+
+/** 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) {
+        nameInput.classList.add("invalid-input");
+    }
+    let emailInput = document.getElementById("femail");
+    let email = validInput(emailInput.value);
+    if(!email) {
+        emailInput.classList.add("invalid-input");
+    }
+    let telInput = document.getElementById("ftel");
+    let tel = validInput(telInput.value);
+    if(!tel) {
+        telInput.classList.add("invalid-input");
+    }
+    if (name && email && tel) {
+        mailto(name,email,tel);
+    }
+    return false;
+}
+
+/** Updates input color when entering new letter */
+function updateInput(input) {
+    input.classList.remove("invalid-input");
+    return false;
+}
+</script>   
\ No newline at end of file