jquery-validate example

by newblt123

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<form>
    <div style="margin: 1em;">
    <div class="left-inner-addon ">
        <i class="fa fa-usd"></i>
        <div class="form-group">
            <input type="number" class="form-control" placeholder="Amount" name="amount"/>
        </div>
        </div>
        <button type="submit" id="expenseaccount-submit-fr" data-bind="click: onSubmit" data-role="button" class="button-right btn-success"><span class="glyphicon glyphicon-ok-sign"></span>&nbsp;Ok</button>        
    </div>
</form>

CSS

.left-inner-addon {
    position: relative;
    margin-bottom: 5px;
}
.left-inner-addon input, .left-inner-addon textarea {
    padding-left: 30px;    
}
.left-inner-addon i {
    position: absolute;
    padding: 10px 12px;
    pointer-events: none;
}

.right-inner-addon {
    position: relative;
}
.right-inner-addon input {
    padding-right: 30px;    
}

.right-inner-addon i {
    position: absolute;
    right: 0px;
    padding: 10px 12px;
    pointer-events: none;
}

JavaScript

$(function(){
    $( "form" ).validate({
        rules: {
            amount: {
                required: true,
                min: 0.01
            }
        },
        highlight: function (element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function (element) {
            $(element).closest('.form-group').removeClass('has-error');
        },
        errorElement: 'span',
        errorClass: 'help-block',
        errorPlacement: function (error, element) {
            if (element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        }
    });
});