JSFiddle - React, Tailwind, and code Playground

by Fadly_Dzil_Massere

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/overcast/jquery-ui.css">
<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> 
            </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

input.error{ border: 1px solid red; }
label.error {   
    margin-left: .5em;
    float: left;
    color: red;
}

JavaScript

$(document).ready(function() {
               
                $("#form1").validate({
                        rules: {
                            'request[]': {
                                required: true
                                },
                            'keluhan': {
                                required: true
                                }
                            },
                    submitHandler: function(form) {
                        $("#errorDiv").html("");
                        form.submit();
                    }

                });
            });