$('#defaultForm').bootstrapValidator({ 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 can\'t 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, dot and underscore' } } }, country: { validators: { notEmpty: { message: 'The country is required and can\'t be empty' } } }, acceptTerms: { validators: { notEmpty: { message: 'You have to accept the terms and policies' } } }, email: { validators: { notEmpty: { message: 'The email address is required and can\'t be empty' }, emailAddress: { message: 'The input is not a valid email address' } } }, website: { validators: { uri: { allowLocal: true, message: 'The input is not a valid URL' } } }, password: { validators: { notEmpty: { message: 'The password is required and can\'t be empty' }, identical: { field: 'confirmPassword', message: 'The password and its confirm are not the same' } } }, confirmPassword: { validators: { notEmpty: { message: 'The confirm password is required and can\'t be empty' }, identical: { field: 'password', message: 'The password and its confirm are not the same' } } }, ages: { validators: { lessThan: { value: 100, inclusive: true, message: 'The ages has to be less than 100' }, greaterThan: { value: 10, inclusive: false, message: 'The ages has to be greater than or equals to 10' } } } } });
<form id="defaultForm" method="post" action="" class="form-horizontal"> <div id="title"> <img class="img-responsive" src="images/regist_title.png" alt="新規会員登録" /> </div> <fieldset> <div class="form-group"> <div class="form-inline"> <label class="ontrol-label">Username</label> <input type="text" class="form-control" name="username" /> </div> </div> <div class="form-group"> <div class="form-inline"> <label class="control-label">Country</label> <select class="form-control" name="country"> <option value="">-- Select a country --</option> <option value="fr">France</option> <option value="de">Germany</option> <option value="it">Italy</option> <option value="jp">Japan</option> <option value="ru">Russia</option> <option value="gb">United Kingdom</option> <option value="us">United State</option> </select> </div> </div> <div class="form-group"> <div class="checkbox"> <label class="control-label"><input type="checkbox" name="acceptTerms" />Accept the terms and policies</label> </div> </div> </fieldset> <fieldset> <div class="form-group"> <div class="form-inline"> <label class="control-label">Email address</label> <input type="text" class="form-control" name="email" /> </div> </div> <div class="form-group"> <div class="form-inline"> <label class="control-label">Website</label> <input type="text" class="form-control" name="website" placeholder="http://" /> </div> </div> </fieldset> <fieldset> <div class="form-group"> <div class="form-inline"> <label class="control-label">Password</label> <input type="password" class="form-control" name="password" /> </div> </div> <div class="form-group"> <div class="form-inline"> <label class="control-label">Retype password</label> <input type="password" class="form-control" name="confirmPassword" /> </div> </div> </fieldset> <fieldset> <div class="form-group"> <div class="form-inline"> <label class="control-label">Ages</label> <input id="age" type="text" class="form-control" name="ages" /> </div> </div> </fieldset> <div class="btns form-inline"> <button type="submit" class="btn btn-primary">この内容で登録する</button> <button type="reset" class="btn btn-default">クリア</button> </div> </form>