validate FE

app/javascript/packs/validation.js

@@ -23,12 +23,32 @@ Validator = function(options) {
       errorElement.innerText = ''
       inputElement.parentElement.classList.remove('invalid')
     }
+
+    return !errorMessage;
   }
 
   // get Element 
   var formElement = document.querySelector(options.form)
   
   if (formElement) {
+    // handle submit
+    formElement.onsubmit = function (e) {
+      e.preventDefault();
+      var isFormValid = true;
+
+      options.rules.forEach(function (rule){
+        var inputElement = formElement.querySelector(rule.selector);
+        var isValid = validate(inputElement, rule);
+        if (!isValid) {
+          isFormValid = false;
+        }
+      });
+      
+      if (isFormValid) {
+        formElement.submit()
+      }
+    }
+
     options.rules.forEach(function (rule){
 
       // save rules 
@@ -75,4 +95,4 @@ Validator.isEmail = function (selector) {
       return regex.test(value) ? undefined : 'Email invalid';
     }
   }
-}
+}
\ No newline at end of file

app/views/applies/new.html.slim

@@ -22,14 +22,16 @@
         .col-10
           = f.text_field :email, value: @apply.email ||= @current_user.email, class: 'form-control'
           span.form-msg
-      .row.mb-5
+      .row.mb-5.form-group
         / - if @user.cv.attached?
         /   = url_for(@user.cv)
         .col-2 
           = f.label :cv, class: 'form-label label'
         .col-10
           = f.file_field :cv, accept: ApplyJob::ACCEPT_CONTENT_TYPE, class: 'form-control'
-          = f.submit 'Confirm', class: 'btn btn-primary w-25 my-4 btn-height'
+          span.form-msg
+          br
+          = f.submit 'Confirm', class: 'btn btn-primary w-25 my-4 btn-height', data: { disable_with: false }
 
 = render 'validate_form'
 javascript:
@@ -39,6 +41,7 @@ javascript:
         rules: [
           Validator.isRequired('#apply_job_user_name'),
           Validator.isRequired('#apply_job_email'),
+          Validator.isRequired('#apply_job_cv'),
           Validator.isEmail('#apply_job_email')
         ]
   })