bsValidate

新規会員登録
This is only a test.
	var customMessagesForm = $('#customMessagesForm');
    // Custom Messages
    customMessagesForm.bsValidate({
        fields:{
            name: {
                required: {
                    helpText: "Please enter your name.",
                    alert: "You are required to enter your name."
                }
            },
            radioGroup: {
                required: {
                    helpText: "Please select at least one",
                    alert: "You are required select at least one radio button",
                    dependency: {
                        equals: ['name', 'Billy']
                    }
                }
            },
            email: {
                required: {
                    helpText: "Please enter your email.",
                    alert: "You are required to enter your email."
                },
                email: {
                    helpText: "This doesn't look like a valid email.",
                    alert: "Please enter a valid email address."
                }
            },
            emailConfirm: {
                required: {
                    helpText: "Please confirm your email.",
                    alert: "You are required to confirm your email.",
                    dependency: {
                        isNotBlank: 'email'
                    }
                },
                match: {
                    field: "email",
                    helpText: "Oops. That doesn't match!",
                    alert: "It doesn't look like the two email addresses match."
                }
            },
            website: {
                regex: {
                    pattern: /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/g,
                    helpText: "This doesn't look like a real URL",
                    alert: "Please enter an actual website address."
                }
            },
            message: {
                characters: {
                    max: 100,
                    helpText: "No more than 100 characters, please",
                    alert: "Your message is too long!"
                }
            }
        },
        before: function(){
            customMessagesForm.find('.alert').remove();
        },
        success: function(e){
            e.preventDefault();
            alert('Success!');
        }
    });
    	
	<div id="customMessagesExample" class="section">

            <form id="customMessagesForm" action="success.html" method="post" class="well">
                <div class="alert alert-info">
                    This is only a test.
                </div>
                <div class="form-group">
                    <label class="control-label">Name</label>
                    <input type="text" name="name" class="form-control" />
                </div>
                <div class="form-group">
                    <label class="control-label">Email</label>
                    <input type="text" name="email" class="form-control" />
                </div>
                <div class="form-group">
                    <label class="control-label">Confirm Email</label>
                    <input type="text" name="emailConfirm" class="form-control" />
                </div>
                <div class="form-group">
                    <div class="radio">
                        <label>
                            <input type="radio" name="radioGroup" value="1" /> 1
                        </label>
                    </div>
                    <div class="radio">
                        <label>
                            <input type="radio" name="radioGroup" value="2" /> 2
                        </label>
                    </div>
                    <div class="radio">
                        <label>
                            <input type="radio" name="radioGroup" value="3" /> 3
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label">Website</label>
                    <input type="text" name="website" class="form-control" />
                </div>
                <div class="form-group">
                    <label class="control-label">Message</label>
                    <textarea name="message" class="form-control" rows="8"></textarea>
                </div>
                <div class="form-group">
                    <input type="submit" class="btn btn-primary" value="Submit" />
                </div>
            </form>
        </div><!-- #customMessagesExample -->
        	
ページトップへ戻る