jQUery form validate SO - 18935324

jQUery form validate

by panchroma

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.32/jquery.form.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/jquery.validate.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/additional-methods.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.js"></script>
<div class="well">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#home" data-toggle="tab">Front End</a></li>
        <li><a href="#profile" data-toggle="tab">Wall Post</a></li>
    </ul>
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane active in control-group" id="home">
            <form enctype="multipart/form-data" action="<?php echo base_url('admin/addCompetition'); ?>" method="post" id="inputForm">
                <div class="control-group">
                    <label class="control-label" >Heading:</label>
                    <div class="controls">
                        <input name="heading" type="text" value="" class="input-xlarge"/>
                    </div>
                </div>
                
                <label class="control-label">Description:</label>
                <input name="description" type="text" value="" class="input-xlarge"/>
                
                <label class="control-label">Question:</label>
                <input name="question" type="text" value="" class="input-xlarge"/>
                
                <label class="control-label">Terms & Conditions</label>
                <textarea name="terms" value="" rows="3" class="input-xlarge">...

JavaScript

$(document).ready(function () {
    
    $('#inputForm').validate({
        ignore: '',
        rules: {
            heading: {
                required: true
            },
            description: {
                required: true
            },
            question: {
                required: true
            },
            terms: {
                required: true
            },
            wall_post_text: {
                required: true
            },
            wall_post_link: {
                required: true
            },
            wall_post_description: {
                required: true
            },
            image_link: {
                required: true
            }
        },
        highlight: function (element) {
            $(element).closest('.control-group').removeClass('success').addClass('error');
        },
        success: function (element) {
            element
            .text('OK!').addClass('valid')
            .closest('.control-group').removeClass('error').addClass('success');
        },
        submitHandler: function(){
            console.log('x')
            return false;
        }
    });
});