Bootstrap Validator

by oktaviardi pratama

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.1/js/bootstrapValidator.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.1/css/bootstrapValidator.min.css">
<form id="update-form" class="form-horizontal">
    <div class="form-group">
        <input type="text" class="form-control" name="first" placeholder="First Name" value="" />
    </div>
    
    <div class="form-group">
        <input type="text" class="form-control" name="last" placeholder="Last Name" value="" />
    </div>
    
    <div class="form-group">
        <input type="text" class="form-control" name="email" placeholder="Email" value="" />
    </div>
    
    <div class="form-group">
        <input type="text" class="form-control" name="phone" placeholder="Phone" value="" />
    </div>
    
    <input type="submit" class="btn btn-primary" value="Update" />
</form>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
#update-form {
    margin: 10% 10%;
}

JavaScript

$('#update-form').bootstrapValidator({
    trigger: 'blur',
    fields: {
        first: {
            validators: {
                notEmpty: {
                    message: 'Your first name is required'
                },
                regexp: {
                    regexp: /^[a-zA-Z ]+$/,
                    message: 'Your first name cannot have numbers or symbols'
                }
            }
        },
        last: {
            validators: {
                notEmpty: {
                    message: 'Your last name is required'
                },
                regexp: {
                    regexp: /^[a-zA-Z ]+$/,
                    message: 'Your last name cannot have numbers or symbols'
                }
            }
        },
        email: {
            validators: {
                notEmpty: {
                    message: 'The email is required'
                },
                emailAddress: {
                    message: 'The input is not a valid email address'
                }
            }
        },
        phone: {
            validators: {
                notEmpty: {
                    message: 'The phone number is required'
                },
                regexp: {
                    regexp: /^\+?1?([()/\.\-\s]*[0-9]){10}\s*((ext|x)\s*[0-9]+)*$/,
                    message: 'The input is not a valid US phone number'
                }
            }
        }
    }
})
.on('error.field.bv', '[name="phone"]', function(e, data){
    // change the data-bv-trigger value to keydown
    $(e.target).attr('data-bv-trigger','keydown');
    // destroy the plugin
    // console.info(data.bv.getOptions());
    data.bv.destroy();
    // console.info(data.bv.getOptions());
    // initialize the plugin
    $('#update-form').bootstrapValidator(data.bv.getOptions());
});