Bootstrap form control

by magizter

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="https://afarkas.github.io/webshim/js-webshim/minified/polyfiller.js"></script>
<form action="#" class="form-horizontal ws-validate">


    <div class="form-group">
        <label for="email" class="control-label col-sm-4">Email*</label>
        <div class="col-sm-8">
        <input type="email" class="form-control"  placeholder="Email" required />
        <div class="ws-errorbox" hidden=""></div>
        </div>
    </div>
    
    
    <div class="form-group">
        <label for="password" class="control-label">Password*</label>
        <input type="password" class="form-control"  placeholder="Password" required />
    </div>
    <div class="form-group">
        <div class="checkbox">
            <label>
                <input type="checkbox" required="" />Remember me</label>
        </div>
    </div>
    <div class="form-group">
    <input type="submit" class="btn btn-primary" name="Submit" value="Submit">
    
    <!-- <button type="submit" class="btn btn-primary">submit</button>-->
    
    </div>
</form>

CSS

body {
    margin: 10px;
    padding: 10px;
}
form {
    max-width: 480px;
    margin: auto;
}
.form-group > [class*="col-"] + .ws-errorbox {
    padding: 0 15px;
}
[class*="col-"].ws-errorbox { clear: none; }

JavaScript

(function () {
webshim.activeLang('hu');
    webshim.setOptions('forms', {
        lazyCustomMessages: true,
        iVal: {
            sel: '.ws-validate',
            handleBubble: 'hide', // hide error bubble

            //add bootstrap specific classes
            errorMessageClass: 'help-block',
            successWrapperClass: 'has-success',
            errorWrapperClass: 'has-error',

            //add config to find right wrapper
            fieldWrapper: '.form-group'
        }
    });

    //load forms polyfill + iVal feature
    webshim.polyfill('forms');
})();