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 -->