JSFiddle - React, Tailwind, and code Playground

by Manoj kumar Lakshman

HTML

<div class="box-content">	
   
    <form class="form-horizontal" id ="form1">
    <fieldset>
        <div class="control-group">
            <label class="control-label">Kind Of Complaint :</label>
            <div class="controls" id="chekboxes">
                <label class="checkbox inline"><input type="checkbox" name="request[]" id="Login" value="Login" /> Login </label>
                    <label class="checkbox inline"><input type="checkbox" name="request[]" id="Printer" value="Printer"/> Printer </label>
                    <label class="checkbox inline"><input type="checkbox" name="request[]" id="Monitor" value="Monitor"/> Monitor</label>
                    <label class="checkbox inline"><input type="checkbox" name="request[]" id="Computer" value="Computer"/> Computer</label>
                    <label class="checkbox inline"><input type="checkbox" name="request[]" id="Network" value="Network"/> Network</label>
                    <label class="checkbox inline"><input type="checkbox" name="request[]" id="Other" value="Lain-lain" /> Other</label> 
                <span class="err_text"> Error text</span>
            </div>
        </div>

        <div class="control-group hidden-phone">
            <label class="control-label" for="Keluhan" >Description: </label>
            <div class="controls">
                <textarea class="cleditor" name="keluhan" id="keluhan" rows="3"></textarea>
            </div>
        </div>

        <div class="form-actions">
            <button type="submit" class="btn btn-primary" id="submit"  >Submit</button>
            <button type="reset" class="btn">Cancel</button>
        </div>
    </fieldset>
                    </form>
</div>

CSS

.err_text{
    float:right;
    color:red;
}

JavaScript

$.validator.addMethod("inline", function() {
                return $("#form1").find(".inline:checked").length > 0;
            }, 'Please select at least one .');

            $(document).ready(function() {
                $("input[name=request[]]").change(function() {
                    var me = $(this);
                   
                    otherInputs.attr("disabled", !this.checked);
                    otherInputs.attr("value", "");
                   
                });
               
                $("#form1").validate({
                    errorPlacement: function(error, element) {
                        if ($(element).hasClass("one_required")) {
                            error.insertAfter($(element).closest("table"));
                        } else {
                            error.insertAfter(element);
                        }
                    },
                        rules: {
                            'request[]': {
                                required: true
                                }
                            },
                    submitHandler: function(form) {
                        $("#errorDiv").html("");
                        form.submit();
                    }

                });
            });