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.
Related
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 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)
I can't seem to get validation to work on my bootstrap modal, I have struggled with several of the examples that I have encountered.
What is the correct way to validate a bootstrap modal?
My HTML:
<div class="modal fade" id="addMyModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Stuff</h4>
</div>
<div class="modal-body">
<form class="form-control" role="form" id="newModalForm">
<div class="form-group">
<label class="control-label col-md-3" for="email">A p Name:</label>
<div class="col-md-9">
<input type="text" class="form-control required error" id="pName" name="pName" placeholder="Enter a p name" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3" for="email">Action:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="action" placeholder="Enter and action">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" id="btnSaveIt">Save</button>
<button type="button" class="btn btn-default" id="btnCloseIt" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
My Javascript:
$(function () {
$("#newModalForm").validate({
rules: {
pName: {
required: true,
minlength: 8
},
action: "required"
},
messages: {
pName: {
required: "Please enter some data",
minlength: "Your data must be at least 8 characters"
},
action: "Please provide some data"
}
});
});
Based upon my code nothing appears to happen when I click the save button on modal. I am utilizing the jquery.validate.js script.
Can someone point me in the right direction?
You have two issues:
You're button needs to be set to type="submit" not type="button"
Your submit button should be inside your form tag.
See working example Snippet.
$(function() {
$("#newModalForm").validate({
rules: {
pName: {
required: true,
minlength: 8
},
action: "required"
},
messages: {
pName: {
required: "Please enter some data",
minlength: "Your data must be at least 8 characters"
},
action: "Please provide some data"
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addMyModal">Open Modal</button>
<div class="modal fade" id="addMyModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Stuff</h4>
</div>
<div class="modal-body">
<form role="form" id="newModalForm">
<div class="form-group">
<label class="control-label col-md-3" for="email">A p Name:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="pName" name="pName" placeholder="Enter a p name" require/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3" for="email">Action:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="action" name="action" placeholder="Enter and action" require>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" id="btnSaveIt">Save</button>
<button type="button" class="btn btn-default" id="btnCloseIt" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
If you need send data via AJAX from bootstrap modal use following code:
$("#addMyModal form").validate({
rules: {
Name: {
required: true,
minlength: 2
},
Email: {
required: true,
minlength: 5
},
Phone: {
required: true,
minlength: 12
}
},
messages: {
Name: {
required: "Обязательное поле",
minlength: "Минимальная длинна Имени 2 символа"
},
Email: {
required: "Обязательное поле",
minlength: "Минимальная длинна Email 5 символов",
email: "Пожалуйста введите корректный email адрес."
},
Phone: {
required: "Обязательное поле",
minlength: "Минимальная длинна Телефона 11 символов"
}
},
submitHandler: function(form) {
$.ajax({
url: './pay-vip.php',
type: 'POST',
data: $(form).serialize(),
success: function(response) {
location.replace(location + "pay-vip.php");
alert("Send mail")
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addMyModal">Open Modal</button>
<div class="modal fade" id="addMyModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Stuff</h4>
</div>
<div class="modal-body">
<form role="form" id="newModalForm">
<div class="form-group">
<label class="control-label col-md-3" for="email">A p Name:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="pName" name="pName" placeholder="Enter a p name" require/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3" for="email">Action:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="action" name="action" placeholder="Enter and action" require>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" id="btnSaveIt">Save</button>
<button type="button" class="btn btn-default" id="btnCloseIt" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
I had some similar problem. But it turned out that
$("#newModalForm").validate({ ... });
has to be put outside the
$(function () { });
This fixed my issue
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.
Form validation is not working but same code is running in html and form validation also works i have uploaded all static resources please suggest me what changes in code are required.
1. I have uploaded static resourced successfully.
2. All files path is correct.
3. Suggest me if any changes necessary for html tag to visualforce tag
<apex:stylesheet value="{!URLFOR($Resource.validation, 'valid/bootstrap.min.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.validation, 'valid/formValidation.min.css')}"/>
<apex:includeScript value="{!URLFOR($Resource.validation,'valid/bootstrap.min.js')}"/>
<apex:includeScript value="{!$Resource.bootstrapjs}"/>
<apex:includeScript value="{!URLFOR($Resource.validation,'valid/bootstrap1.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.validation,'valid/formValidation.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.validation,'valid/jquery.min.js')}"/>
</head>
<body>
<form id="basicBootstrapForm" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Full name</label>
<div class="col-xs-4">
<input type="text" class="form-control" name="firstName" placeholder="First name" />
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label" id="captchaOperation"></label>
<div class="col-xs-4">
<input type="text" class="form-control" name="captcha" />
</div>
</div>
<div class="form-group">
<div class="col-xs-9 col-xs-offset-3">
<button type="submit" class="btn btn-primary" name="signup" value="Sign up">Submit</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
// Generate a simple captcha
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
$('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
$('#basicBootstrapForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
firstName: {
row: '.col-xs-4',
validators: {
notEmpty: {
message: 'The first name is required'
}
}
},
}
});
});
</script>
</body>
</html>
Its an weird issue. It gets resolved when using the CDN like below in HEAD section after Jquery.js
<script src="https://cdn.jsdelivr.net/npm/jquery-validation#1.17.0/dist/jquery.validate.min.js"></script>