Bootstrap 3 form wizard validation

i have an issue with validating my bootstrap form wizard. When there is an error it should alert me when i click next. for example, if i have left first name empty, it must alert me when i click next and prevent me to go next.

here is my html code: http://ift.tt/1LFeIkj

and my script code is as follows:

$(document).ready(function(){
var validator = $("#myform").bootstrapValidator({
    feedbackIcons: {
            valid: "glyphicon glyphicon-ok",
            invalid: "glyphicon glyphicon-remove", 
            validating: "glyphicon glyphicon-refresh"
        }, 
    fields: {
        firstname: {
            message: "Fname is required.",
            validators:{
                notEmpty:{
                    message: "Please provide an fname"
                }
            }
        },
          lastname: {
            message: "Fname is required.",
            validators:{
                notEmpty:{
                    message: "Please provide an fname"
                }
            }
        },
        gender: {
            validators: {
                notEmpty: {
                    message: 'The gender is required'
                }
            }
        },


    }
});

$(document).ready(function() { var $validator = $("#myform").validate();

$('#rootwizard').bootstrapWizard({
    'tabClass': 'nav nav-pills',
    'onNext': function(tab, navigation, index) {
        var $valid = $("#myform").valid();
        if(!$valid) {
            $validator.focusInvalid();
            return false;
        }
    }
}); 

}); });