Here is my HTML and JavaScript code
<script src = "../js/jquery.min.js"></script>
<script src="../js / formvalidation / bootstrapValidator.min.js"></script>
<script type="text / javascript">
$(document).ready(function() {
$('#staff_add').bootstrapValidator({
message: 'This value is not valid',
fields: {
vender: {
validators: {
notEmpty: {
message: 'The Field is required'
}
}
},
invoicenumber: {
validators: {
notEmpty: {
message: 'The Field is required'
}
}
},
}
});
});
</script>
<form id="staff_add" class="form-horizontal" action="#" method="post" autocomplete="off">
<select class="selectpicker form-control" data-live-search="true" name="vender" tabindex="-1" required="required">
<option>--Select--</option>
<option>001</option>
<option>002</option>
<option>003</option>
</select>
<input type="text" class="form-control" name="invoicenumber" id="invoiceNo" placeholder="Invoice No" required="" />
<button type="submit" name="add_purchase" id="submit_postcode" class="btn btn-success">Submit</button>
</form>
The Select box validation is not working, the textbox validation is working correctly.
I remove select box class selectpicker validation working but to put selectpicker class its not work
You need to add a submitHandler
$(document).ready(function() {
$('#staff_add').bootstrapValidator({
message: 'This value is not valid',
fields: {
vender: {
validators: {
notEmpty: {
message: 'The Field is required'
}
}
},
invoicenumber: {
validators: {
notEmpty: {
message: 'The Field is required'
}
}
},
}
submitHandler: function (validator, form, submitButton) {
return false;
}
});
});
You also need to assign value attributes to option elements
Give the fist option value as empty or else it has the value of --Select-- so condition fails.
<option value="">--Select--</option>
Modified
<!DOCTYPE html>
<html>
<head>
<title>BootstrapValidator demo</title>
<link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/>
<script type="text/javascript" src="../vendor/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<!-- form: -->
<section>
<div class="col-lg-8 col-lg-offset-2">
<div class="page-header">
<h2>Sign up</h2>
</div>
<form id="staff_add" method="post" class="form-horizontal" action="target.php">
<select class="selectpicker form-control" data-live-search="true" name="vender" tabindex="-1" required="required">
<option>--Select--</option>
<option>001</option>
<option>002</option>
<option>003</option>
</select>
<br><br>
<input type="text" class="form-control" name="invoicenumber" id="invoiceNo" placeholder="Invoice No" required=""/>
<br><br>
<button type="submit" name="add_purchase" id="submit_postcode" class="btn btn-success">Submit</button>
</form>
</div>
</section>
<!-- :form -->
</div>
</div>
<script>
$(document).ready(function() {
$('#staff_add').bootstrapValidator({
message: 'This value is not valid',
fields: {
vender: {
validators: {
notEmpty: {
message: 'The Field is required'
}
}
},
invoicenumber: {
validators: {
notEmpty: {
message: 'The Fieldsd is required'
}
}
},
}
});
});
</script>
</body>
</html>
For setting an option as "not valid as validation answer" you should disable it:
<select class="selectpicker form-control" data-live-search="true" name="vender" tabindex="-1" required="required">
<option disabled="disabled">--Select--</option>
<option>001</option>
<option>002</option>
<option>003</option>
#### Apply value="" it works.###
<label>Role</label>
<select class="form-control" id="roleId" required>
<option value="">-Select-</option>
<option value="1">Doctor</option>
</select>
Related
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 2 years ago.
Everything works fine in this JSFiddle
However, when I am trying to use the same code inside my index.html and hit Request Data button, it's not working. The following is the code :
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
//BEGIN FORM Validations
$('#validateForm').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
patientSets: {
validators: {
notEmpty: {
message: 'Please select a patient set'
}
}
},
titleOfResearchProject: {
validators: {
stringLength: {
min: 5,
message: 'Please Enter the title with minimum 5 letters length'
},
notEmpty: {
message: 'Please Enter title of your project'
}
}
},
descriptionOfResearchProject: {
validators: {
stringLength: {
min: 15,
max: 100,
message: 'Please enter at least 15 characters and no more than 100'
},
notEmpty: {
message: 'Please Enter Description'
}
}
},
intendedUse: {
validators: {
notEmpty: {
message: 'Please select one option'
}
}
},
}
});
//END FORM Validations
</script>
</head>
<body>
<div id="wrapper">
<div id="page-wrapper">
<div class="container-fluid">
<!-- Page Heading -->
<div class="row" id="main" >
<!-- BEGIN Bootstrap form testing-->
<form class="form-horizontal" id="validateForm" method="POST" onsubmit="return false">
<div class="row">
<div class="col-md-offset-1 col-md-4">
<div class="form-group">
<label class="control-label">Select your patient sets:</label>
<select name="patientSets" class="form-control" >
<option value=" " >Please select patient set</option>
<option>PS1</option>
<option>PS2</option>
</select>
</div>
<div class="form-group">
<label class="control-label">Description of research project:</label>
<textarea class="form-control" name="descriptionOfResearchProject" placeholder="Enter your description here...."></textarea>
</div>
</div>
<div class="col-md-offset-1 col-md-4">
<div class="form-group">
<label class="control-label">Title of your research project:</label>
<input name="titleOfResearchProject" placeholder="Enter your title here...." class="form-control" type="text">
</div>
<div class="form-group">
<label class="control-label">Intended use:</label>
<select name="intendedUse" class="form-control" >
<option value=" " >Please select one</option>
<option>test1</option>
<option>test2</option>
</select>
</div>
</div>
</div>
<button class="btn btn-success" id="conceptsButton">Request Data</button>
</form>
</div>
</div>
<!-- /#page-wrapper -->
</div><!-- /#wrapper -->
</body>
</html>
The following is the screenshot of the above index.html page which is inside the public folder of XAMPP's htdocs.
And developer's console shows no errors as shown below;
Your code has some broken links and you didn't initialize your validation function on document 'ready', also you shouldn't initialize your validator before the validateForm object loads. I've fixed these below:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <!-- fixed broken link -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <!-- fixed broken link -->
</head>
<body>
<div id="wrapper">
<div id="page-wrapper">
<div class="container-fluid">
<!-- Page Heading -->
<div class="row" id="main" >
<!-- BEGIN Bootstrap form testing-->
<form class="form-horizontal" id="validateForm" method="POST" onsubmit="return false">
<div class="row">
<div class="col-md-offset-1 col-md-4">
<div class="form-group">
<label class="control-label">Select your patient sets:</label>
<select name="patientSets" class="form-control" >
<option value=" " >Please select patient set</option>
<option>PS1</option>
<option>PS2</option>
</select>
</div>
<div class="form-group">
<label class="control-label">Description of research project:</label>
<textarea class="form-control" name="descriptionOfResearchProject" placeholder="Enter your description here...."></textarea>
</div>
</div>
<div class="col-md-offset-1 col-md-4">
<div class="form-group">
<label class="control-label">Title of your research project:</label>
<input name="titleOfResearchProject" placeholder="Enter your title here...." class="form-control" type="text">
</div>
<div class="form-group">
<label class="control-label">Intended use:</label>
<select name="intendedUse" class="form-control" >
<option value=" " >Please select one</option>
<option>test1</option>
<option>test2</option>
</select>
</div>
</div>
</div>
<button class="btn btn-success" id="conceptsButton">Request Data</button>
</form>
</div>
</div>
<!-- /#page-wrapper -->
</div><!-- /#wrapper -->
<script type="text/javascript">
//Initialize function when document 'is ready'
$(document).ready(function() {
//BEGIN FORM Validations
$('#validateForm').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
patientSets: {
validators: {
notEmpty: {
message: 'Please select a patient set'
}
}
},
titleOfResearchProject: {
validators: {
stringLength: {
min: 5,
message: 'Please Enter the title with minimum 5 letters length'
},
notEmpty: {
message: 'Please Enter title of your project'
}
}
},
descriptionOfResearchProject: {
validators: {
stringLength: {
min: 15,
max: 100,
message: 'Please enter at least 15 characters and no more than 100'
},
notEmpty: {
message: 'Please Enter Description'
}
}
},
intendedUse: {
validators: {
notEmpty: {
message: 'Please select one option'
}
}
},
}
});
//END FORM Validations
});
//END FORM Validations
</script>
</body>
</html>
Thats because you try to initialize validator before validateForm object load. Move your script to front of </body>
I'm pretty new to Semantic UI and I'm a little rusty on my Javascript so please bear with me. I literally just copy pasted the code from the Semantic UI example on their website to see how their form validation works and for some reason it's not working with me. Could there be something I'm missing?
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css">
<link rel="stylesheet" type="text/css" href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/components/form.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.js"> </script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/components/form.js"> </script>
</head>
<body>
<script>
$('.ui.form')
.form({
fields: {
name: {
identifier: 'name',
rules: [
{
type : 'empty',
prompt : 'Please enter your name'
}
]
},
skills: {
identifier: 'skills',
rules: [
{
type : 'minCount[2]',
prompt : 'Please select at least two skills'
}
]
},
gender: {
identifier: 'gender',
rules: [
{
type : 'empty',
prompt : 'Please select a gender'
}
]
},
username: {
identifier: 'username',
rules: [
{
type : 'empty',
prompt : 'Please enter a username'
}
]
},
password: {
identifier: 'password',
rules: [
{
type : 'empty',
prompt : 'Please enter a password'
},
{
type : 'minLength[6]',
prompt : 'Your password must be at least {ruleValue} characters'
}
]
},
terms: {
identifier: 'terms',
rules: [
{
type : 'checked',
prompt : 'You must agree to the terms and conditions'
}
]
}
}
})
;
</script>
<form class="ui form segment">
<p>Tell Us About Yourself</p>
<div class="two fields">
<div class="field">
<label>Name</label>
<input placeholder="First Name" name="name" type="text">
</div>
<div class="field">
<label>Gender</label>
<select class="ui dropdown" name="gender">
<option value="">Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div>
<div class="two fields">
<div class="field">
<label>Username</label>
<input placeholder="Username" name="username" type="text">
</div>
<div class="field">
<label>Password</label>
<input type="password" name="password">
</div>
</div>
<div class="field">
<label>Skills</label>
<select name="skills" multiple="" class="ui dropdown">
<option value="">Select Skills</option>
<option value="css">CSS</option>
<option value="html">HTML</option>
<option value="javascript">Javascript</option>
<option value="design">Graphic Design</option>
<option value="plumbing">Plumbing</option>
<option value="mech">Mechanical Engineering</option>
<option value="repair">Kitchen Repair</option>
</select>
</div>
<div class="inline field">
<div class="ui checkbox">
<input type="checkbox" name="terms">
<label>I agree to the terms and conditions</label>
</div>
</div>
<div class="ui blue submit button">Submit</div>
<div class="ui error message"></div>
</form>
</body>
</html>
$(document).ready(function(){
// and here your code
});
as semantic needs jQuery to work so you have to call the semantic UI functions in jQuery.
I was wondering about the answer of Ashish sah. So I created a Code Pen for your problem:
CodePen
This shows that the script must not be in $(document).ready(..
Strange is also that the code from the question works.
Only difference I see: Code Pen adds the Script dependency add the end of the body - not the head.
i have a form with validation rule input3 value cant exceed input2 value, i have success before i submit the buttot, but when i submit the button i have a problem when i input a value on input3, anything input in input3 show message error.
input2 value depend on select list in left.
i use plug in fromvalidation for doing that.
this my form code
$('#tambah').formValidation({
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
qty: {
row: '.col-md-3',
validators: {
notEmpty: {
message: 'Jumlah Barang Tidak Boleh Kosong'
},
lessThan: {
value: $("#kolombayangan").val(),
inclusive: true,
message: 'Stok Tidak Tersedia'
},
integer: {
message: 'Harus Berupa Angka'
}
}
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="tambah" id="tambah" role="form" action="aksi_tambahdetailpermintaan.php" method="POST">
<input type="hidden" name="kolombayangan" id="kolombayangan" >
<div class="form-row">
<input class="form-control" name="faktur" id="faktur" type="hidden" value="<?php echo $datapermintaan['no_suratjalan']; ?>">
<div class="form-group">
<div class="col-md-5">
<select name="kodebarang" id="kodebarang" class="form-control">
<option value=""></option>
<?php $barang=m ysql_query( "SELECT tbarang.id_barang, tbarang.detail_barang, tpersediaan.saldo FROM tbarang
INNER JOIN tpersediaan ON tbarang.id_barang=tpersediaan.id_barang WHERE tpersediaan.saldo !='0' ORDER BY tbarang.id_barang ASC"); while ($databarang=m ysql_fetch_assoc($barang)) { ?>
<option value="<?php echo $databarang['id_barang']?>">
<?php echo $databarang[ 'detail_barang']?>
</option>
<?php } ?>
</select>
</div>
<div class="form-group">
<div class="col-md-2">
<input type="text" name="jumlah" id="jumlah" class="input-sm form-control" readonly>
</div>
</div>
<div class="form-group inputjumlah">
<div class="col-md-3">
<input type="text" name="qty" id="qty" class="input-sm form-control">
</div>
</div>
</div>
<div class="text-right">
<button type="submit" class="btn btn-sm btn-primary" id="tambah">Tambah</button>
</div>
<br>
</div>
</form>
sorry for my bad english.
You need to specify a number for the lessThan.value property, but .val() returns a string.
To solve this, convert the return value of val() to number. This you can do with the unary + operator:
lessThan: {
value: +$("#kolombayangan").val(),
inclusive: true,
message: 'Stok Tidak Tersedia'
},
Secondly, you have two elements with the same id property value (tambah). This is not allowed in HTML. Some things might not work as expected unless this is corrected.
How to check the validation of the password. In below when I try to type something in password text field and if I ignore the confirm password text field, still it can be submitted. But if I type something in confirm password text field it'll check it with the password text field, whether the inputs are same or not.
Fiddle
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css"/>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"> </script>
</head>
<body>
<form id="enableForm" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">New password</label>
<div class="col-xs-5">
<input type="password" class="form-control" name="password" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Confirm_password</label>
<div class="col-xs-5">
<input type="password" class="form-control" name="confirm_password" />
</div>
</div>
<div class="form-group">
<div class="col-md-9 col-md-offset-3">
<button type="submit" class="btn btn-default">Validate</button>
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function() {
$('#enableForm').bootstrapValidator({
container: '#messages',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
password: {
enabled: false,
validators: {
notEmpty: {
message: 'The password is required and cannot be empty'
}
}
},
confirm_password: {
enabled: false,
validators: {
notEmpty: {
message: 'The confirm password is required and cannot be empty'
},
identical: {
field: 'password',
message: 'The password and its confirm must be the same'
}
}
}
}
})
// Enable the password/confirm password validators if the password is not empty
.on('keyup', '[name="password"]', function() {
var isEmpty = $(this).val() == '';
$('#enableForm')
.bootstrapValidator('enableFieldValidators', 'password', !isEmpty)
.bootstrapValidator('enableFieldValidators', 'confirm_password', !isEmpty);
// Revalidate the field when user start typing in the password field
if ($(this).val().length == 1) {
$('#enableForm').bootstrapValidator('validateField', 'password')
.bootstrapValidator('validateField', 'confirm_password');
}
});
});
</script>
</html>
<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');
})
});
});