I want to open a modal dialog box only when form is completely validated with no error. At first i have disabled my button so that it should validate first and it should be enable only when form is validated. I am using jquery validation for this but does not get the result which i want. I want when user click submit button if fields are not filled it should not open modal.
here is my HTML code
<div class="form-group">
<div class="col-sm-4 col-sm-offset-2">
<button class="btn btn-white" type="reset">Cancel</button>
<!-- Trigger the modal with a button -->
<button type="button" id="myBtn" class="btn btn-primary" data-toggle="modal" data-target="#myModal" disabled />Confirm</button>
</div>
</div>
and me jquery for this
(function() {
$('#PasswordForm > input').keyup(function() {
var empty = false;
$('#PasswordForm > input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#myBtn').attr('disabled', 'disabled');
} else {
$('#myBtn').removeAttr('disabled');
}
});})()
The form validation which i used is
$(document).ready(function()
{
$('#PasswordForm').formValidation({
message: 'This value is not valid',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields:
{
NPassword:
{
validators:
{
notEmpty:
{
message: 'The password is required and can\'t be empty'
}
}
},
RPassword:
{
validators:
{
notEmpty:
{
message: 'The confirm password is required and can\'t be empty'
},
identical:
{
field: 'NPassword',
message: 'The password and its confirm are not the same'
}
}
}
}
});
});
<form id="PasswordForm" method="post" class="form-horizontal" action="/HRM/HRM.PasswordChange">
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">Employee Name</label>
<div class="col-sm-10">
<input type="text" disabled="" value="##UserName##" class="form-control">
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">New Password</label>
<div class="col-sm-10">
<div class="row">
<div class="col-md-6">
<input type="password" name="NPassword" placeholder="New Password" class="form-control">
</div>
</div>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">Retype Password</label>
<div class="col-sm-10">
<div class="row">
<div class="col-md-6">
<input type="password" name="RPassword" placeholder="Retype Password" class="form-control">
</div>
</div>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<div class="col-sm-4 col-sm-offset-2">
<button class="btn btn-white" type="reset">Cancel</button>
<!-- Trigger the modal with a button -->
<button type="button" id="myBtn" class="btn btn-primary" data-toggle="modal" data-target="#myModal" disabled />Confirm</button>
</div>
</div>
</form>
any suggestion or help would be appreciated.
Try to change your button to:
<button type="button" id="myBtn" class="btn ban-primary">Confirm</button>
And add following function:
$('#myBtn').on('click', function(){
if(!empty) {
$('#myModal').modal('toggle');
}
});
You have to make empty a global variable.
(untested code)
Related
i want to output "field is required " or minlength error messages inside input box or placeholder with box color becoming red via jQuery . i have my form and validations work but message goes out underneath the boxes which looks ugly and make some disorder in the form .
my code :
<form action="" method="POST" id="login_form">
<div class="form-group has-feedback">
<input type="username" name="username" id="username" class="form-control" placeholder="username" ><span class="glyphicon glyphicon-envelope form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" name="password" id= "password" class="form-control" placeholder="Password">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-8">
</div>
<!-- /.col -->
<div class="col-xs-4">
<button type="submit" class="btn btn-primary btn-block btn-flat"name="login">Sign In</button>
</div>
<!-- /.col -->
</div>
</form>
jQuery code :
<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('form').validate({
rules: {
username: {
required: true,
minlength: 5
},
password: {
required: true,
minlength: 5
},
},
});
});
</script>
You can define your css for the .error class then detect on onkeyup for the input.error for removing the error label see code snippet :
$(document).ready(function() {
$('form').validate({
rules: {
username: {
required: true,
minlength: 5
},
password: {
required: true,
minlength: 5
},
},
});
$(document).on("keyup", "input.error", function(){
$("label[for='"+$(this).attr('id')+"']").hide();
});
});
.form-group {
position:relative;
}
label.error{
position:absolute;
top:0px;
left:0px;
background-color:#fff;
color:red;
}
input.error{
border:1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.js"></script>
<form action="" method="POST" id="login_form">
<div class="form-group has-feedback">
<input type="username" name="username" id="username" class="form-control" placeholder="username" ><span class="glyphicon glyphicon-envelope form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" name="password" id= "password" class="form-control" placeholder="Password">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-8">
</div>
<!-- /.col -->
<div class="col-xs-4">
<button type="submit" class="btn btn-primary btn-block btn-flat"name="login">Sign In</button>
</div>
<!-- /.col -->
</div>
</form>
I have 2 inputs and upon clicking the button I want to check if 1 input is really validated or not (this is to bypass all the validation to check only 1)
I can revalidate it, but I want some boolean feedback if it is validated.
something similar to ' var isValidStep = fv.isValidContainer($tab); '
Thanks.
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="form-group btn-group-bottom">
<label for="fFname" class="child">First Name</label>
<input name="legalFirstName" class="form-control req" id="fFname" autocomplete="off" type="text" />
</div>
</div>
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="form-group btn-group-bottom">
<label for="fLname" class="child">Last Name</label>
<input name="legalLastName" class="form-control req" autocomplete="off" id="fLname" type="text" />
</div>
<button type="button" value="Submit" class="btn btn-success easing-effect btn-padding btn-submit subbutton" name="submit" id="subbutton">Submit</button>
<script>
$('.rootwizard').formValidation({
framework: 'bootstrap',
excluded: ':disabled',
live: 'enabled',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
// Name Validation
locale: 'en',
fields: {
legalFirstName: {
live: 'enabled',
trigger: 'blur',
validators: {
stringLengthName: {
max: 30,
},
notEmptyName: {},
regexpName: {
regexpName: /^[a-zA-Z][a-z\sA-Z0-9.,$;]*$/,
}
}
},
legalLastName: {
live: 'enabled',
trigger: 'blur',
validators: {
stringLengthName: {
max: 30,
},
notEmptyName: {},
regexpName: {
regexpName: /^[a-zA-Z][a-z\sA-Z0-9.,$;]*$/,
}
}
}
}
});
$('.btn-submit').click(function() {
$('.rootwizard').formValidation('revalidateField', 'legalFirstName');
});
add 'form' tag to your html and change type button to 'submit' like this :
<form class="rootwizard">
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="form-group btn-group-bottom">
<label for="fFname" class="child">First Name</label>
<input name="legalFirstName" class="form-control req" id="fFname" autocomplete="off" type="text" />
</div>
</div>
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="form-group btn-group-bottom">
<label for="fLname" class="child">Last Name</label>
<input name="legalLastName" class="form-control req" autocomplete="off" id="fLname" type="text" />
</div>
<button type="submit" value="Submit" class="btn btn-success easing-effect btn-padding btn-submit subbutton" name="submit" id="subbutton">Submit</button>
</form>
I'm trying to modify a Bootstrap modal so the form shows errors and does not submit when the form inputs are empty. I know about the "required" command as another possibility but I want to style it so it looks a little nicer. I simply copied and pasted what someone else has done and it works on their site (http://formvalidation.io/examples/modal/#resetting-form-when-showing-the-modal) but not mine. When I click submit with empty fields, the modal closes.
Here is my code:
HTML:
<button type="button" id="appointmentbtn" class="btn btn-primary" data-toggle="modal" data-target="#loginModal" />Make an Appointment</button>
<!-- Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="Login" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h5 class="modal-title">Request an Appointment</h5>
</div>
<div class="modal-body">
<!-- The form is placed inside the body of modal -->
<form id="loginForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Full Name</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Phone Number</label>
<div class="col-xs-5">
<input type="number" class="form-control" name="number" placeholder="(888)888-8888" />
</div>
</div>
<div class="form-group">
<div class="col-xs-5 col-xs-offset-3">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</form>
</div>
</div>
</div>
JS:
$(document).ready(function() {
$('#loginForm').formValidation({
framework: 'bootstrap',
excluded: ':disabled',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
name: {
validators: {
notEmpty: {
message: 'The name is required'
}
}
},
number: {
validators: {
notEmpty: {
message: 'The phone number is required'
}
}
}
}
});
});
You forget to include one required JS library which cause the form with empty fields to submit without validation and modal get closed, beside this there is nothing wrong with the code,
CSS required
Bootstrap.css
FormValidation.min.css
Font-awesome.min.css
JS libraries required
jQuery.js
Bootstrap.js (Bootstrap Framework)
FormValidation.min.js
Bootstrap.min.js (This library which you missed to include comes with formValidation plugin to support Bootstrap frame-work and must be included in document for validation to work Note: This is not Bootstrap Framework Library)
$(document).ready(function() {
$('#loginForm').formValidation({
framework: 'bootstrap',
excluded: ':disabled',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
name: {
validators: {
notEmpty: {
message: 'The name is required'
}
}
},
number: {
validators: {
notEmpty: {
message: 'The phone number is required'
}
}
}
}
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/css/formValidation.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/formValidation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/framework/bootstrap.min.js"></script>
<button type="button" id="appointmentbtn" class="btn btn-primary" data-toggle="modal" data-target="#loginModal" />Make an Appointment</button>
<!-- Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="Login" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h5 class="modal-title">Request an Appointment</h5>
</div>
<div class="modal-body">
<!-- The form is placed inside the body of modal -->
<form id="loginForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Full Name</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Phone Number</label>
<div class="col-xs-5">
<input type="number" class="form-control" name="number" placeholder="(888)888-8888" />
</div>
</div>
<div class="form-group">
<div class="col-xs-5 col-xs-offset-3">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</form>
</div>
</div>
</div>
Fiddle
Try to call it like this:
$(document).ready(function() {
$('#submit').click(function(e){
e.prevetDefault();
$('#loginForm').formValidation({
framework: 'bootstrap',
excluded: ':disabled',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
name: {
validators: {
notEmpty: {
message: 'The name is required'
}
}
},
number: {
validators: {
notEmpty: {
message: 'The phone number is required'
}
}
}
}
return false;
});
})
});
Unfortunately I don't have this plugin so I can not test it. Please don't blame me if this don't work. Normally I use 'jquery.validate.js' which is free.
I am using bootstrap in my web page and trying to make a form on that page.
I've used the standard classes of bootstrap for making the form. I've already used the validation to check the emptiness of the form. I just want to add the email and phone number validation further in my code.
The code for the form and the and the already declared validation script is given below:
<script type="text/javascript">
function validateText(id) {
if ($("#" + id).val() == null || $("#" + id).val() == "") {
var div = $("#" + id).closest("div");
div.removeClass("has-success");
$("#glypcn" + id).remove();
div.addClass("has-error has-feedback");
div.append('<span id="glypcn' + id
+ '" class="glyphicon glyphicon-remove form-control-feedback"></span>');
return false;
} else {
var div = $("#" + id).closest("div");
div.removeClass("has-error");
$("#glypcn" + id).remove();
div.addClass("has-success has-feedback");
div.append('<span id="glypcn' + id
+ '" class="glyphicon glyphicon-ok form-control-feedback"></span>');
return true;
}
}
$(document).ready(function() {
$("#contactButton").click(function() {
if (!validateText("contactName")) {
return false;
}
if (!validateText("contactEmail")) {
return false;
}
if (!validateText("contactMobile")) {
return false;
}
if (!validateText("contactAddress1")) {
return false;
}
if (!validateText("contactCity")) {
return false;
}
$("form#contactForm").submit();
}
);
});
<form class="form-horizontal" id="contactForm">
<div class="form-group">
<label for="contactName" class="col-sm-2 control-label">Name<sup>*</sup></label>
<div class="col-sm-10">
<input type="text" class="form-control" id="contactName">
</div>
</div>
<div class="form-group">
<label for="contactEmail" class="col-sm-2 control-label">Email<sup>*</sup></label>
<div class="col-sm-10">
<input type="email" class="form-control" id="contactEmail">
</div>
</div>
<div class="form-group">
<label for="contactMobile" class="col-sm-2 control-label">Mobile
Number<sup>*</sup>
</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="contactMobile">
</div>
</div>
<div class="form-group">
<label for="contactAddress1" class="col-sm-2 control-label">Address1<sup>*</sup></label>
<div class="col-sm-10">
<textarea class="form-control" rows="5" id="contactAddress1"></textarea>
</div>
</div>
<div class="form-group">
<label for="contactAddress2" class="col-sm-2 control-label">Address2</label>
<div class="col-sm-10">
<textarea class="form-control" rows="5" id="contactAddress2"></textarea>
</div>
</div>
<div class="form-group">
<label for="contactCity" class="col-sm-2 control-label">City<sup>*</sup></label>
<div class="col-sm-10">
<select class="form-control" id="contactCity">
<option>KURUKSHETRA</option>
<option>PEHOWA</option>
<option>KARNAL</option>
</select>
</div>
</div>
<div class="col-xs-12 col-lg-12 col-md-12 col-sm-12">
<p>
<span id="helpBlock" class="help-block"><sup>*</sup> marked fields
are compulsory!</span>
</p>
</div>
<div class="checkbox">
<label> <input type="checkbox"> I agree to the <a href="#">Terms of
Service</a>
</label>
</div>
<div class="col-xs-12 col-lg-12 col-md-12 col-sm-12">
<center>
<p>
<button type="button" class="btn btn-primary btn-lg btn-block"
id="contactButton">
Submit <span class="glyphicon glyphicon-arrow-right"> </span>
</button>
</p>
</center>
</div>
</form>
You should use a regex like mentioned in the comment.
The regex is also mentioned here.
var email_regex = /^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i;
Here is a working example.
you have to require additional plugin for this.
Try this:
<form id="emailForm" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Email address</label>
<div class="col-xs-7">
<input type="text" class="form-control" name="email" />
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#emailForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
email: {
validators: {
emailAddress: {
message: 'The value is not a valid email address'
}
}
}
}
});
});
</script>
Original Issue:
My form is hitting the validation correctly but submitting when it shouldn't be.
Following http://formvalidation.io/examples/ajax-submit/
Viewing my console I don't see any of the log statements in the .on "error" section or the "success" printed out. And the page just posts to itself. With the data in the url. I don't know what I'm missing here as basically it skips all .on statements.
What is going on here?
Remember Validation works just non of the .on statements.
HTML:
<form id="service_path_form" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Service Name</label>
<div class="col-xs-8">
<input type="text" class="form-control" name="service_path_name" placeholder="Name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">IP</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="service_path_ip" placeholder="IP" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Description</label>
<div class="col-xs-8">
<textarea class="form-control" name="service_path_description" rows="3" placeholder="Write a short Description"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Enable</label>
<div class="col-xs-5">
<div class="radio">
<label>
<input type="radio" name="service_path_enabled" value="1" /> Enabled
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="service_path_enabled" value="0" /> Disabled
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-9 col-xs-offset-4">
<button type="submit" class="btn btn-primary" name="validate" value="Validate and Submit">Validate and Submit</button>
</div>
</div>
<input type="hidden" name="created_by" value="{{request.user}}">
<input type="hidden" name="date_created" id = "date_created" value="">
JS:
<script>
$(document).ready(function() {
$('#service_path_form')
.bootstrapValidator({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
service_path_name: {
// The messages for this field are shown as usual
validators: {
notEmpty: {
message: 'The Service Path Name is required'
},
}
},
service_path_ip: {
// Show the message in a tooltip
err: 'tooltip',
validators: {
notEmpty: {
message: 'The destination ip address is required'
},
ip: {
message: 'The ip address is not valid'
}
}
},
service_path_enabled: {
// Show the message in a tooltip
err: 'tooltip',
validators: {
notEmpty: {
message: 'Do you want this service path to be actively monitored?'
}
}
}
}
})
.on('err.form.fv', function(e) {
e.preventDefault();
console.log(e)
console.log('test')
})
.on('success.form.fv', function(e) {
// Prevent form submission
console.log("MADE IT HERE")
e.preventDefault();
var $form = $(e.target),
fv = $form.data('formValidation');
// Use Ajax to submit form data
console.log("MADE IT HERE")
$.ajax({
url: "/servicepathapi/v1/servicepaths/",
type: 'POST',
data: $form.serialize(),
success: function(result) {
console.log(result)
}
});
})
});
</script>
CURRENT:
Update with suggested upgrade:
I tried #Arkni 's suggestion, while I feel like it's in the right direction with I'm now getting this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="{% static 'app/scripts/js/bootstrap/bootstrap.min.js' %}" ></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="{% static 'form_validation/js/formValidation.js' %}" ></script>
<script src="{% static 'form_validation/js/framework/bootstrap.min.js' %}" ></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$('#service_path_form')
.formValidation({
framework: 'bootstrap',
icon: {
With this output:
FIX:
While checking all of my source files I noticed that I was actually loading jquery 2.0.2 and 2.1.3, removing 2.0.2 fixed the issue.
As you said in your question, you are using FormValidation not BootstrapValidator.
So to solve your problem, replace this
$(document).ready(function() {
$('#service_path_form')
.bootstrapValidator({ // <====
with
$(document).ready(function() {
$('#service_path_form')
.formValidation({ // <====
Some notes:
FormValidation is the new name of BootstrapValidator from version 0.6.0.
BootstrapValidator is deprecated and not supported anymore.
See this guide to upgrade from BootstrapValidator to Formvalidation.
Since you're using FormValidation, you should try to remove jquery.validate.min.js as I am afraid of the confliction.
This jsfiddle works properly:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/vendor/formvalidation/css/formValidation.min.css">
<form id="service_path_form" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Service Name</label>
<div class="col-xs-8">
<input type="text" class="form-control" name="service_path_name" placeholder="Name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">IP</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="service_path_ip" placeholder="IP" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Description</label>
<div class="col-xs-8">
<textarea class="form-control" name="service_path_description" rows="3" placeholder="Write a short Description"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Enable</label>
<div class="col-xs-5">
<div class="radio">
<label>
<input type="radio" name="service_path_enabled" value="1" /> Enabled
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="service_path_enabled" value="0" /> Disabled
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-9 col-xs-offset-4">
<button type="submit" class="btn btn-primary" name="validate" value="Validate and Submit">Validate and Submit</button>
</div>
</div>
</form>
The scripts:
<script src="//code.jquery.com/jquery-2.1.3.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="/vendor/formvalidation/js/formValidation.min.js"></script>
<script src="/vendor/formvalidation/js/framework/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#service_path_form')
.formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
service_path_name: {
// The messages for this field are shown as usual
validators: {
notEmpty: {
message: 'The Service Path Name is required'
},
}
},
service_path_ip: {
// Show the message in a tooltip
err: 'tooltip',
validators: {
notEmpty: {
message: 'The destination ip address is required'
},
ip: {
message: 'The ip address is not valid'
}
}
},
service_path_enabled: {
// Show the message in a tooltip
err: 'tooltip',
validators: {
notEmpty: {
message: 'Do you want this service path to be actively monitored?'
}
}
}
}
});
});
</script>
Here is the result showing how it looks like:
I hope it helps you.