BootstrapValidator

新規会員登録
	$('#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>
              	
ページトップへ戻る