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
Related
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.
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
}
},
}
});
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'
}
}
}
}
});
});
<script>
$(document).ready(function() {
$('#idfundtransferownaccounts').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
fACNumber: {
validators: {
notEmpty: {
message: 'please select a account number'
},
different: {
field: 'tACNumber',
message: 'Please select a different account number'
}
}
},
tACNumber: {
validators: {
notEmpty: {
message: 'please select a account number'
},
different: {
field: 'fACNumber',
message: 'Please select a different account number'
}
}
},
amountValue: {
validators: {
notEmpty: {
message: 'please enter a amount'
}
}
},
fACNarration: {
validators: {
notEmpty: {
message: 'please fill the above field'
}
}
},
tACNarration: {
validators: {
notEmpty: {
message: 'please fill the above field'
}
}
}
}
});
});
</script>
this is the form validation i have made using bootstrap validator.
<form class="form-horizontal" class="form-inline" name="fundtransferownaccounts" id="idfundtransferownaccounts" method="post" action="FundTransferToOwnAccounts" style="margin-left: px;margin-right: 5px;">
<div class="form-group">
<label class="control-label col-sm-3">From Account Number*</label>
<div class="col-sm-6">
<div class="btn-group div-inline">
<c:set var="accounts" scope="session" value="${accounts}"/>
<c:set var="accountslist" value="${accounts.getAccountlist()}"/>
<select name="fACNumber" id="faccountnumber" class="form-control" >
<option selected disabled>Select Account Number</option>
<c:forEach var="num" begin="0" end="${accountslist.size()-1}">
<c:set var="accNum" value="${accountslist.get(num).getAccountno()}"/>
<option value="${accNum}"><c:out value="${accNum}"/></option>
</c:forEach>
</select>
</div>
<input type="checkbox" id="getfaccountbalance" onclick="getfAccountBalance(document.getElementById('faccountnumber').value, this)"> View Account Balance
<label id="faccountbalance" style="color: blue" ></label>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">To Account Number*</label>
<div class="col-sm-6">
<div class="btn-group" >
<c:set var="accounts" scope="session" value="${accounts}"/>
<c:set var="accountslist" value="${accounts.getAccountlist()}"/>
<select name="tACNumber" id="taccountnumber" class="form-control" >
<option selected disabled>Select Account Number</option>
<c:forEach var="num" begin="0" end="${accountslist.size()-1}">
<c:set var="accNum" value="${accountslist.get(num).getAccountno()}"/>
<option value="${accNum}"><c:out value="${accNum}"/></option>
</c:forEach>
</select>
</div>
<input type="checkbox" id="gettaccountbalance" onclick="gettAccountBalance(document.getElementById('taccountnumber').value, this)"> View Account Balance
<label id="taccountbalance" style="color: blue"> </label>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Transfer Amount*</label>
<div class="col-sm-6">
<input name="amountValue" id="transferamount" type="text" class="input-sm" maxLength="11" onkeyup="$(this).val(validcurrencyinput($(this).val()))" placeholder="0 . 00">
<div class="form-group div-inline">
<select name="currencyType" id="currencytype" class="form-control" style="margin-left: 15px;font-size: 10px;">
<option>LKR</option>
<option>USD</option>
<option>EURO</option>
<option>DINAR</option>
</select>
</div>
<div class="space"></div>
<label id="amountvalue" style="color: blue"> </label>
<label style="color:#017ebc; font-size: 11px;font-weight: bold;">Note: To transfer ten either enter 10 or 10.00</label>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">From Account Narration*</label>
<div class="col-sm-6">
<input name="fACNarration" type="text" class = "form-control input-sm">
<div class="space"></div>
<label style="color:#999999; font-size: 11px;font-weight: bold;">Please limit your sender's account narration to 30 characters.</label>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">To Account Narration*</label>
<div class="col-sm-6">
<input name="tACNarration" type="text" class = "form-control input-sm">
<div class="space"></div>
<label style="color:#999999; font-size: 11px;font-weight: bold;">Please limit your sender's account narration to 30 characters.</label>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-primary" onClick="this.form.reset();">Reset</button>
</div>
</div>
</form>
this is the form
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Confirm Your Transaction</h4>
</div>
<div class="modal-body">
<p>Are You Sure to Proceed the Transaction</p>
</div>
<div class="modal-footer">
<button type="button" id="submit" class="btn btn-primary" data-dismiss="modal" onclick="submitform()">Proceed</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
this is the bootstrap modal i have implemented.
now i want to pop up this modal and then send data to a servlet file.
but in here the data is passed to servlet file after the button submission.
i found the answer guys.
we have to write some code in bootstrap validation onSuccess.
here is the modified code.
$(document).click(function() {
//$("#confirmownaccountsdiv").hide();
$('#idfundtransferownaccounts').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
fACNumber: {
validators: {
notEmpty: {
message: 'please select a account number'
},
different: {
field: 'tACNumber',
message: 'Please select a different account number'
}
}
},
tACNumber: {
validators: {
notEmpty: {
message: 'please select a account number'
},
different: {
field: 'fACNumber',
message: 'Please select a different account number'
}
}
},
amountValue: {
validators: {
notEmpty: {
message: 'please enter a amount'
}
}
},
fACNarration: {
validators: {
notEmpty: {
message: 'please fill the above field'
}
}
},
tACNarration: {
validators: {
notEmpty: {
message: 'please fill the above field'
}
}
}
},
onSuccess:(function(e, data) {
e.preventDefault();
$('.modal').appendTo("body").modal('show');
})
});
});
thanks for the comments guys.
With the button:
<button type="submit" class="btn btn-primary">Submit</button>
Remove the attribute type="submit" from the button.
The attribute type="submit" automatically submits your form.
<button onclick="showpopup()" class="btn btn-primary">Submit</button>
<script>
function showpopup() {
$('#myModal').show();
}
</script>
(OR)
<button id="showpopup" class="btn btn-primary">Submit</button>
<script>
$("#showpopup").click(function(event){
event.preventDefault();
$('#myModal').show();
});
</script>
I think you need to attach an onsubmit event handler to the form and call preventDefault on the event, in order to stop the regular submit. Then in that handler, do what you want, and then submit.
Here i found the answer.Thanks for your reply guys.
$(document).click(function() {
$('#idfundtransferownaccounts').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
fACNumber: {
validators: {
notEmpty: {
message: 'please select a account number'
},
different: {
field: 'tACNumber',
message: 'Please select a different account number'
}
}
},
tACNumber: {
validators: {
notEmpty: {
message: 'please select a account number'
},
different: {
field: 'fACNumber',
message: 'Please select a different account number'
}
}
},
amountValue: {
validators: {
notEmpty: {
message: 'please enter a amount'
}
}
},
fACNarration: {
validators: {
notEmpty: {
message: 'please fill the above field'
}
}
},
tACNarration: {
validators: {
notEmpty: {
message: 'please fill the above field'
}
}
}
},
onSuccess: (function(e, data) {
e.preventDefault();
$('.modal').appendTo("body").modal('show');
})
});
});
I wanted to use BootstrapValidator to validate couple of fields and enable stripe button upon validation. The problem is that the button is enabled once any of the fields are validated. I am trying to enabled the stripe button once both fields are validated.(ignore the datepicker field). below is my javascript code.
$('#myform')
.bootstrapValidator({
message: 'This value is not valid',
//live: 'submitted',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
fname: {
message: 'The first name is not valid',
validators: {
notEmpty: {
message: 'The first name is required and can\'t be empty'
},
stringLength: {
min: 2,
max: 30,
message: 'The first name must be more than 6 and less than 30 characters long'
},
/*remote: {
url: 'remote.php',
message: 'The username is not available'
},*/
regexp: {
regexp: /^[a-zA-Z]+$/,
message: 'The first name can only consist of alphabetical letters'
}
}
},
lname: {
message: 'The last name is not valid',
validators: {
notEmpty: {
message: 'The last name is required and can\'t be empty'
},
stringLength: {
min: 3,
max: 30,
message: 'The last name must be more than 6 and less than 30 characters long'
},
/*remote: {
url: 'remote.php',
message: 'The username is not available'
},*/
regexp: {
regexp: /^[a-zA-Z]+$/,
message: 'The last name can only consist of alphabetical letters'
}
}
},
}
})
.on('success.form.fv', function(e) {
// Prevent submit form
e.preventDefault();
var $form = $(e.target),
validator = $form.data('bootstrapValidator');
$form.find('#result').html('Thanks for signing up. Now you can sign in as ' + validator.getFieldElements('fname').val()).show();
});
$('.stripe-button-el').attr("disabled", true );
});
And this is the form:
<form id="myform" method="post" class="form-horizontal">
<div class="form-group" >
<label class="col-sm-3 control-label">Full name</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="fname" placeholder="First name" id="fname" />
</div>
<div class="col-sm-4">
<input type="text" class="form-control" name="lname" placeholder="Last name" id="lname" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Pick a Date</label>
<div class="col-sm-4">
<input class="form-control" name="date" type="text" id="datepicker"/>
</div>
<div class="col-sm-4">
<script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="<?php echo $stripe['publishable_key']; ?>"
data-amount="5000" data-zip-code = "true" data-description="Whatever">
</script>
</div>
</div>
<div class="form-group" >
<label class="col-sm-4 control-label" id='results'></label>
</div>
</form>
You need an event triggered with every keystroke to determine whether the form is valid. Once you know its valid, you can take action on the button. BootstrapValidator's API includes everything you need to do this (other than capturing the event itself).
You can append this on method to your $('#myform') chain:
.on('keyup', function() {
// Get your form's validator
var validator = $('#myform').data('bootstrapValidator');
// Validate the form
validator.validate();
// Check if the form is valid
if (validator.isValid()) {
// Perform action on Stripe button
}
});