JSFiddle - React, Tailwind, and code Playground

by mstefanko

HTML

<div class="popup-create-rule">
    <div class="RE-Create-Rule">
        <div class="RE-header-label" style="margin-top: 0!important; margin-bottom: 5px; font-weight: bold; color: #333333;"><span id="require-label">1) Rule Name</span></div>
               <input id="RE-rule-name">
                <input type="hidden" id="RE-rule-id">
                <input type="hidden" id="RE-rule-order">
                <input type="hidden" value="1" id="RE-rule-status">
                <div class="RE-header-label">2) Event That Triggers This Rule</div>
                <select class="RE-trigger" id="RE-trigger">
                    <option value="DEFAULT">Select...</option>
                    <option value="59AC3FFD-7C1E-4BE4-8B46-AA3D068B7F7C">Comment Submitted</option><option value="F7F3A005-CC79-42E6-978A-6ADF3EEBA3A7">Idea Status Changed</option><option value="F9D5E5F4-BC09-478B-BE80-CB4A6D4BC685">Idea Submitted</option><option value="53BD0B70-6574-4F23-8FAF-EF2654242F98">Idea Updated</option><option value="F86A4CEE-C979-428D-8413-9491FBE99648">Vote Submitted</option>                </select>
                <div class="RE-header-label">3) Meet the Following Conditions</div>
                <div class="RE-condition-wrapper">
                    <div class="condition" id="RE-condition-1" style="padding-top: 0px;">
                        <select class="RE-attribute" id="RE-attribute-1">
                            <option value="DEFAULT">Select...</option>
                            <option value="6C4A2001-9090-4E4C-B05F-FE4306C85A57" condition_type="1">Category</option><option value="50503FDF-67F8-4A3C-A312-BD048C2CD983" condition_type="0">Comment Count</option><option value="42CB880E-FFC9-499F-B846-98798E1978C0" condition_type="0">Score</option><option value="C912BD78-375C-4700-90DD-F427466F0D03" condition_type="1">Status</option><option value="9A6DC4D4-FFF5-4109-8613-32A9711EAB3E" condition_type="1">Submitted by</option><option...

JavaScript

var popupClass = ".popup-create-rule";

$('.green_btn_container').bind('click',function(){
         
                        var success = validate(popupClass);
                        if (success == true){
                            o.btn.call(this);
                            close_bimodal();
                        } else {
                            // For now, do nothing
                            // Style changes for failed validation occur in validation function
                        }
                }); 

//Form Validation
            function validate(popupClass){

                var inputValidate = true;
                var selectValidate = true;
                var divValidate = true;
                var validate = true;
                
            if ($('.bi-required').length) {
                $(popupClass + ' .bi-required').each(function(i) {
                //Add validation to change handler

                $(this).change(function() {
                        //Basic form validation
                    if ($(this).find('input').val() == '') {
                        inputValidate = false;
                        $(this).find('input').css('border', '1px solid red');
                        $(this).parents().siblings('.bi-form-label').css('color', 'red');
                    } else if ($(this).find('select').val() == 'DEFAULT') {
                        selectValidate = false;
                        $(this).find('select').css('border', '1px solid red');
                        $(this).parents().siblings('.bi-form-label').css('color', 'red');
                    } else if ($(this).find('select').val() == 'SSC_DEFAULT') {
                        selectValidate = false;                          
                        $(this).find('select').css('border', '1px solid red');
                        $(this).parents().siblings('.bi-form-label').css('color', 'red');
                    } else {
                       ...