Bootstrap Validator - No validation is actually happening

Question

I have been looking into Bootstrap validator, and I have copied and formatted their examples and included all of the required Bootstrap and Bootstrap validator and jQuery code, but the example is not working like it implied.

Here is my code.

<!DOCTYPE  html>
<html>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/> <!-- Bootstrap 3 -->
<link rel="stylesheet" href="bootstrap_validator/css/bootstrapValidator.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script> <!-- Bootstrap 3 -->
<script type="text/javascript" src="bootstrap_validator/js/bootstrapValidator.js"></script>

<form id="registerform" class="form-horizontal">
    <div class="form-group">
        <label class="col-lg-2 control-label">Account</label>
        <div class="col-lg-4">
            <input type="text" class="form-control" name="username" placeholder="Username" />
        </div>
        <div class="col-lg-4">
            <input type="text" class="form-control" name="email" placeholder="Email address" />
        </div>
    </div>
</form>

<script type="text/javascript">
    $(document).ready(function() {
    $('#registerform').bootstrapValidator({
        live: 'enabled',
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            username: {
                message: 'The username is not valid',
                validators: {
                    notEmpty: {
                        message: 'The username is required and cannot be empty'
                    },
                    stringLength: {
                        min: 6,
                        max: 30,
                        message: 'The username must be more than 6 and less than 30 characters long'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_]+$/,
                        message: 'The username can only consist of alphabetical, number and underscore'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: 'The email is required and cannot be empty'
                    },
                    emailAddress: {
                        message: 'The input is not a valid email address'
                    }
                }
            }
        }
    });
});
</script>
</html>

score 5 · Answer 1 · answered Jun 06 '14 at 05:12

try giving id as mail and username as a attribute. like this.

<input type="text" class="form-control" name="username" placeholder="Username" id="username" />
<input type="text" class="form-control" name="email" placeholder="Email address" id="email" />

hope this helps

Bootstrap Validator - No validation is actually happening

1 Answers1