add script to validate form

app/assets/stylesheets/applies.scss

@@ -82,3 +82,12 @@ $text-color-white: #fff;
 .btn-height {
   height: 50px;
 }
+
+.invalid {
+  .form-msg {
+    color: #f33a58;
+  }
+  input {
+    border-color: #f33a58;
+  }
+}
\ No newline at end of file

app/javascript/packs/application.js

@@ -15,3 +15,4 @@ ActiveStorage.start()
 import "bootstrap"
 window.bootstrap = require("bootstrap");
 import "../stylesheets/application.scss";
+

app/javascript/packs/validation.js

+Validator = function(options) {
+
+  var selectorRules = {};
+
+  // validate   
+  function validate(inputElement, rule) {
+    var errorMessage;
+    var errorElement = inputElement.parentElement.querySelector(options.errorSelector);
+    
+    // get rules of selector 
+    var rules = selectorRules[rule.selector];
+
+    // stop if error
+    for (var i = 0; i < rules.length; ++i) {
+      errorMessage = rules[i](inputElement.value)
+      if (errorMessage) break;
+    }
+
+    if (errorMessage) {
+      errorElement.innerText = errorMessage
+      inputElement.parentElement.classList.add('invalid')
+    } else {
+      errorElement.innerText = ''
+      inputElement.parentElement.classList.remove('invalid')
+    }
+  }
+
+  // get Element 
+  var formElement = document.querySelector(options.form)
+  
+  if (formElement) {
+    options.rules.forEach(function (rule){
+
+      // save rules 
+      if (Array.isArray(selectorRules[rule.selector])) {
+        selectorRules[rule.selector].push(rule.test)
+      } else {
+        selectorRules[rule.selector] = [rule.test];
+      }
+
+      var inputElement = formElement.querySelector(rule.selector);
+
+      if (inputElement) {
+        // blur
+        inputElement.onblur = function () {
+         validate(inputElement, rule)
+        }
+
+        // when input
+        inputElement.oninput = function () {
+          var errorElement = inputElement.parentElement.querySelector(options.errorSelector)
+
+          errorElement.innerText = ''
+          inputElement.parentElement.classList.remove('invalid')
+        }
+      }
+    });
+  }
+}
+
+Validator.isRequired = function (selector) {
+  return {
+    selector: selector,
+    test: function (value) {
+      return value.trim() ? undefined : "This field can't be blank"
+    }
+  }
+}
+
+Validator.isEmail = function (selector) {
+  return {
+    selector: selector,
+    test: function (value) {
+      var regex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+      return regex.test(value) ? undefined : 'Email invalid';
+    }
+  }
+}

app/views/applies/_ribbon.html.slim

@@ -12,6 +12,3 @@
       span.circle 
         | 3
       | Done
-
-
-        
\ No newline at end of file

app/views/applies/new.html.slim

@@ -7,19 +7,21 @@
   p.fs-5.fw-bold.mb-4.text-center 
     = @job.title
   .col
-    = form_with(model: @apply, url: confirm_path, local: true) do |f|
+    = form_with(model: @apply, url: confirm_path, local: true, id: 'apply-form') do |f|
       = render 'shared/error_messages', object: f.object
-      .row.mb-5
+      .row.mb-5.form-group
         = f.hidden_field :job_id, value: @job.id
         .col-2
           = f.label :user_name, 'Full name', class: 'form-label label'
         .col-10
-          = f.text_field :user_name, class: 'form-control'
-      .row.mb-5
+          = f.text_field :user_name, value: @current_user.name, class: 'form-control'
+          span.form-msg
+      .row.mb-5.form-group
         .col-2 
           = f.label :email, class: 'form-label label'
         .col-10
-          = f.text_field :email, class: 'form-control'
+          = f.text_field :email, value: @current_user.email, class: 'form-control'
+          span.form-msg
       .row.mb-5
         / - if @user.cv.attached?
         /   = url_for(@user.cv)
@@ -30,3 +32,14 @@
           = f.submit 'Confirm', class: 'btn btn-primary w-25 my-4 btn-height'
 
 = render 'validate_form'
+= javascript_pack_tag 'validation'
+javascript:
+  Validator({
+        form: '#apply-form',
+        errorSelector: '.form-msg',
+        rules: [
+          Validator.isRequired('#apply_job_user_name'),
+          Validator.isRequired('#apply_job_email'),
+          Validator.isEmail('#apply_job_email')
+        ]
+  })