JSFiddle - React, Tailwind, and code Playground

by Fadly_Dzil_Massere

HTML

<div class="box-content">   


    <form class ='form-horizontal' id = "myForm" method="POST">
<fieldset>
    <div class="control-group">
        <label class="control-label">Your Request :</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="Lain-lain" value="Lain-lain" > Lain-lain</label>
        </div>
    </div>


    <div class="control-group hidden-phone">
        <label class="control-label" for="Complaint" Complaint : </label>
        <div class="controls">
            <textarea class="cleditor" name="Complaint" id="Complaint" 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>

JavaScript

$(document).ready(function() {

            $('#myform').validate({
                rules: {
                    'request[]': {
                        required: true
                    }
                },
                errorPlacement: function(error, element) {
                    error.insertBefore(element);
                },
                submitHandler: function(form) { // for demo
                    alert('valid form');
                    return false;
                }
            });

        });