I want to implement bootstrapValidator in my form and I have also some hidden input fields but It is validating those also, I want to stop this...
My form code
<form id="create_contract_group" method="post"
- List item
>
<div class="row">
<div class="form-group">
<label class="col-md-4 control-label"><b>{!!Lang::get('site_lang.contract_group')!!}</b></label>
<div class="col-md-8">
<input type="text" class="form-control" name="title" placeholder=" Title of the contract group"/>
<input type="text" class="form-control" name="id" style="display:none">
</div>
</div>
</div>
</form>
My script
<script>
$(document).ready(function() {
$('#create_contract_group').bootstrapValidator({
excluded: ':disabled',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
title: {
validators: {
notEmpty: {
message: 'Title is required.'
},
validatorName: validatorOptions
}
},
}
});
});
</script>
You can use exludes setting in boostrapValidator, like below :
$('#create_contract_group').bootstrapValidator({
excluded: [':disabled', ':hidden', ':not(:visible)'],
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
title: {
validators: {
notEmpty: {
message: 'Title is required.'
},
validatorName: validatorOptions
}
},
}
});
Related
I have a form and the default is readonly for each input. Try to remove readonly attribute when input doesn't qualify the bootstrap validator.
Is there any way to check form with bootstrap validator without submit the button? like checking inside document ready?
How to remove readonly attribute when it doesn't qualify bootstrap validator checking?
<div class="content">
<div class="col-md-12 bg boxCover" >
<div class="row">
<div class="col-md-12 col-sm-12">
<div class ="form-group">
<label for="nama">Nama Lengkap<span class="text-danger">*</span></label>
<input type="text" id="customerName" readonly name="customerName" value="<?php echo $customerName?>" required class="form-control clean">
</div>
</div>
</div>
</div>
</div>
JS
$('#formInput').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
customerName: {
validators: {
regexp: {
regexp: "^[A-Za-z., ]+$",
}
}
}
}
});
I've one text area for multiple email input and I want to validate emails with the bootstrap validator. I can't do this because there is an option for multiple which is by default false and I cannot make it true.
For your Reference (bootstrap validator page): http://bootstrapvalidator.votintsev.ru/validators/emailAddress/
<div class="form-group">
<label for="email" class="col-sm-4 control-label"><span class="required">*</span> Email</label>
<div class="col-sm-8">
<textarea id="company_email" name="email" class="form-control pull-left" rows="2" placeholder="Email"></textarea>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#emailForm').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
email: {
validators: {
notEmpty: {
message: 'Email is required and cannot be empty'
},
emailAddress: {
message: 'The value is not a valid email address'
}
}
}
}
}
});
</script>
From the link you provided:
When setting options via HTML attributes, remember to enable the validator by setting data-bv-emailaddress="true".
You don't need to do that when using HTML 5 type="email" attribute.
Just add those attributes to your textarea:
data-bv-emailaddress-multiple="true" data-bv-emailaddress="true"
Test it out:
$(document).ready(function() {
$('#emailForm').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
email: {
validators: {
notEmpty: {
message: 'Email is required and cannot be empty'
},
emailAddress: {
message: 'The value is not a valid email address'
}
}
}
}
});
});
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>
</head>
<body>
<form id="emailForm" class="form-horizontal">
<div class="form-group">
<label for="email" class="col-sm-4 control-label"><span class="required">*</span> Email</label>
<div class="col-sm-8">
<textarea id="company_email" name="email" class="form-control pull-left" rows="2" placeholder="Email" data-bv-emailaddress-multiple="true" data-bv-emailaddress="true"></textarea>
</div>
</form>
</body>
</html>
Add the tag multiple, like <input type="email" multiple>
See https://www.stefanjudis.com/today-i-learned/email-inputs-can-accept-multiple-email-addresses/
This worked for me to allow comma separated email addresses when using Bootstrap validation.
Hi there here is the html code, as you can see it has different names in the input, i wanted to validate this bootstrap js so that atleast one checkbox has to be selected before the form submission. Below will be the javascript I have used for radio buttons since they have same name. Thank you
`
<div class="form-group required">
<label class="col-md-2 control-label" required>Q2. Which event did you attend?</label>
<div class="col-md-4">
<div class="checkbox">
<label>
<input class="validateCheck" type="checkbox" name="Event_Mel" value="true" />Melbourne</label>
</div>
<div class="checkbox">
<label>
<input class="validateCheck" type="checkbox" name="Event_Syd" value="true" />Sydney</label>
</div>
<div class="checkbox">
<label>
<input class="validateCheck" type="checkbox" name="Event_Bri" value="true" />Brisbane</label>
</div>
<div class="checkbox">
<label>
<input class="validateCheck" type="checkbox" name="Event_Gol" value="true" />Gold Coast</label>
</div>
</div>
</div>`
$(document).ready(function() {
$('#contact_form').bootstrapValidator({
fields: {
comment: {
validators: {
stringLength: {
min: 5,
max: 200,
message: 'Please enter at least 5 characters and no more than 200'
},
notEmpty: {
message: 'Please supply your description'
}
}
},
RateLog: {
validators: {
notEmpty: {
message: 'Please select a value'
}
}
},
LikelyLog: {
validators: {
notEmpty: {
message: 'Please select a value'
}
}
},
EventLog: {
validators: {
notEmpty: {
message: 'Please select a value'
}
}
},
AdditionalFeed: {
validators: {
notEmpty: {
message: 'Please supply your feedback'
}
}
},
ProductTrial: {
validators: {
notEmpty: {
message: 'Please select a value'
}
}
}
}
})
$(document).ready(function() {
$('#contact_form')
.on('init.field.fv', function(e, data) {
// data.field --> The field name
// data.element --> The field element
if (data.field === 'checkEvents') {
var $parent = data.element.parents('.form-group'),
$icon = data.element.data('fv.icon');
$icon.appendTo('#feedbackIcon'); // <--- Move the icon to this element
}
})
.formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
validateCheck: {
selector: '.validateCheck',
err: '#message', // <---- All messages of checkEvents will be placed inside this element
validators: {
notEmpty: {
message: 'Please choose at least one checkbox'
}
}
}
}
});
});
I am using this plugin formValidation my problem is that I want only to trigger the required fields (age,name,yeare) if I choose the value 3 in selectbox this 3 fields will be required.How to do that in formvalidation ?
<form name="myform">
<div class='form-group'>
<label>Type</label>
<div>
<select class='form-control' name='type' id='type'>
<option value ='1'> 1 </option>
<option value ='2'> 2 </option>
<option value ='3'> 3</option>
<option value ='4'> 4 </option>
</select>
</div>
</div>
<div class="form-group">
<label for="age">age</label>
<input type="text" class="form-control" id="age" name="age">
</div>
<div class="form-group">
<label for="name">name</label>
<input type="text" class="form-control" id="name" name="name">
</div>
<div class="form-group">
<label for="year">age</label>
<input type="text" class="form-control" id="year" name="year">
</div>
</form>
here is my js
$('#myform').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
year: {
validators: {
notEmpty: {
message: 'The year is required'
}
}
},
name: {
validators: {
notEmpty: {
message: 'The name is required'
}
}
},
age: {
validators: {
notEmpty: {
message: 'The age is required'
}
}
}
}
});
Thank you in advance.
You can use the enableFieldValidators method to enable & disable the validators of your fields.
First, you have to disable all validators of your fields using the option enabled set to false, and then when you select the value 3 of your selectbox, enable them.
See following code:
$(document).ready(function () {
$('#myform').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
year: {
// Disable the validators of the field 'year'
enabled: false, // <==
validators: {
notEmpty: {
message: 'The year is required'
}
}
},
name: {
// Disable the validators of the field 'name'
enabled: false, // <==
validators: {
notEmpty: {
message: 'The name is required'
}
}
},
age: {
// Disable the validators of the field 'age'
enabled: false, // <==
validators: {
notEmpty: {
message: 'The age is required'
}
}
}
}
});
});
$('#type').on('change', function (e) {
if (parseInt($('#type').val(), 10) === 3) {
// Enable the validators of your fields
// 'age', 'name' & 'year'
$('#myform').data('formValidation').enableFieldValidators('age', true);
$('#myform').data('formValidation').enableFieldValidators('name', true);
$('#myform').data('formValidation').enableFieldValidators('year', true);
} else {
// Disable them again
$('#myform').data('formValidation').enableFieldValidators('age', false);
$('#myform').data('formValidation').enableFieldValidators('name', false);
$('#myform').data('formValidation').enableFieldValidators('year', false);
}
});
Working example:
http://jsfiddle.net/Arkni/ncbybr1b/
References:
enabled option's docs: http://formvalidation.io/settings/#field-enabled
enableFieldValidators method's docs: http://formvalidation.io/api/#enable-field-validators
I use BootstrapValidation to Validate files for PhpExcel.
Fatal error: Uncaught exception 'PHPExcel_Reader_Exception' with message 'Could not open for reading! File does not exist.'
1: How can i set validation to not only accept .xls but the whole filename (file.xls)?
2: File doesn't POST? (See script)
HTML: (I need to have input name ="avatar" to get BootstrapValidation to work)
<form id="fileForm" class="form-horizontal well" action='php/import_excel.php' method="post">
<div class="form-group">
<h4>Välj fil...</h4>
<div class="col-sm-12">
<input type="file" class="form-control" id="file" name="avatar" />
</div>
</div>
<div class="pull-right">
<button type="submit" id="Import" name="Import" class="btn btn-primary button-loading" data-loading-text="Loading...">Ladda upp</button>
</div>
<br />
</form>
JS:
$(document).ready(function() {
$('#fileForm').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
avatar: {
validators: {
file: {
extension: 'xls',
type: 'application/vnd.ms-excel',
message: 'Välj: lkbkom.xls'
}
}
}
}
});
});
PHP:
if(isset($_POST["Import"])){
echo $path=$_FILES["file"]["tmp_name"];
The fault was in the .JS
fields: {
avatar: {
should be:
fields: {
file: {