Frontend Validation

Introduction

Joget allows you to use frontend validation in your forms using JavaScript. This approach leverages Custom HTML to add JavaScript-based validations, enhancing your form's interactivity and user experience by checking input fields before submitting them. 

How does it work?

To implement frontend validation in your Joget forms using JavaScript, follow the steps below.

1. Use the default validator to mark the desired fields as Mandatory in your form.
   
2. Drag and drop a Custom HTML element into your form, and include the following code:
   

   <script>
   $(document).ready(function() {
       $("form").submit(function(event) {
           var isValid = true;
           var radioValue;
   
           // Validate radio buttons
           $(".form-cell-validator:visible:contains('*')").each(function() {
               $(this).parents(".form-cell").find("input:radio").each(function() {
                   $(this).parents(".form-cell").css("background-color", "");
                   var input = $(this).parents(".form-cell").find("input:radio").attr("name");
                   radioValue = $("input[name='" + input + "']:checked");
                   if (radioValue) {
                       if (!radioValue.val()) {
                           $(this).parents(".form-cell").css("background-color", "#f8d7da");
                           isValid = false;
                           return false;
                       }
                   }
               });
   
               // Validate textareas
               $(this).parents(".form-cell").find("textarea").each(function() {
                   var textarea = $(this).parents(".form-cell").find("textarea").attr("name");
                   var textareaValue = $(this).val();
                   if (!textareaValue) {
                       $(this).parents(".form-cell").css("background-color", "#f8d7da");
                       isValid = false;
                       return false;
                   }
               });
   
               // Validate select elements
               $(this).parents(".form-cell").find("select").each(function() {
                   var select = $(this).parents(".form-cell").find("select").attr("name");
                   var selectValue = $('select[id^=' + select + ']').find(":selected").text();
                   if (!selectValue) {
                       $(this).parents(".form-cell").css("background-color", "#f8d7da");
                       isValid = false;
                       return false;
                   }
               });
           });
   
           // Handle invalidation
           if (!isValid) {
               $('#myErrorMsg').fadeIn('fast').delay(1000).fadeOut('fast');
               $.unblockUI();
               return false;
           } else {
               return true;
           }
       });
   });
   </script>
   
   <div id="myErrorMsg" class="alert alert-error" role="alert">
       Validation Error: Missing Required Value
   </div>
   <style>
   #myErrorMsg {
       display: none;
   }
   </style>

   

   This script ensures that all mandatory fields (radio buttons, text areas, and select dropdowns) are validated when the form is submitted. It visually indicates errors and displays an error message if the form submission fails due to missing required values.