My Bootstrap validation works fine in form-control, see below image
My Code is:
<form role="form" data-toggle="validator" id="myform">
<div class="form-group">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<select class="selectpicker" data-live-search="true" title="Select Teacher" id="ddlMultiTeacher" style="background-color: white" required>
<%--<option value="">None</option>--%>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<select class="selectpicker" data-live-search="true" title="Select Subject" id="ddlMultiSubject" style="background-color: white" required>
</select>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-md-3">
<div class="form-group">
<select class="selectpicker" data-live-search="true" title="Select Class" id="ddlMultiClass" style="background-color: white" required>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<select class="selectpicker" data-live-search="true" title="Select Section" id="ddlMultiSection" style="background-color: white" required>
</select>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-md-2">
<%-- <button id="btnSubmit2" class="btn btn-primary btn-block">Save</button>--%>
<input id="btnGenerateSchedule" class="btn btn-primary btn-block" type="submit" value="Save" />
</div>
</div>
</div>
</form>
but whenever I use my buttonsubmit code via jquery, my validation stops working.
$('#btnGenerateSchedule').click(function (e) {
debugger;
e.preventDefault();
bootbox.confirm("<b>Are you sure?</b>", function (result) {
if (result) {
GenerateSchedule();
//bootbox.alert({
// title: "Alert",
// message: "Your Schedule Has Been Generated !"
//})
} else {
//console.log("User declined dialog");
}
});
})
Can anyone tell me what I'm doing wrong? am I missing some plugins ?
When you write jquery submit or click event, then bootstrap or html validation does not work. If you want html/bootstrap validation should work before jquery click/submit event then do as follows:
$('#btnGenerateSchedule').click(function (e) {
if($("form")[0].checkValidity()){
debugger;
e.preventDefault();
bootbox.confirm("<b>Are you sure?</b>", function (result) {
if (result) {
GenerateSchedule();
} else {
//console.log("User declined dialog");
}
});
} });
$("form")[0]) depends on form in page. If it is first form in your page, then form[0], if it is second form in your page, then $("form")1) and so on.
For detail, you can visit link: html and jquery validation together
Try this,
$('form').on('click','#btnGenerateSchedule',function (e) {
debugger;
e.preventDefault();
bootbox.confirm("<b>Are you sure?</b>", function (result) {
if (result) {
GenerateSchedule();
//bootbox.alert({
// title: "Alert",
// message: "Your Schedule Has Been Generated !"
//})
} else {
//console.log("User declined dialog");
}
});
})
Related
I'm trying to submit a form. I have a binding dropdown list and an input field. The dropdown list has three input fields. 0 = pending, 1 = accepted, and 2 = denied. I want to store data if the dropdown value is not 0/pending. If the dropdown is changed/ not pending or the comment input field have not empty, then the Save button enables. Otherwise, the save button is disabled.
function success() {
if (document.getElementById("textsend").value === "") {
document.getElementById('button').disabled = true;
} else {
document.getElementById('button').disabled = false;
}
}
<div class="row border-top pt-2">
<div class="col-md-4">
<span>Decision</span><span asp-validation-for="Heating.Status"></span>
<select asp-for="Heating.Status" asp-items="Html.GetEnumSelectList<ApplicationDecision>()" class="form-control">
<option></option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Comments</span><span></span>
<textarea class="form-control " id="textsend" onkeyup="success()" style="height:100px" maxlength="2000"></textarea>
</div>
</div>
<div class="row border-top p-2">
<div class="col">
<input type="submit" id="button" value="Save" class="btn btn-blueTwo float-right" disabled />
</div>
</div>
But I can't use the dropdown list to add these conditions. Couldn't you please help me?
Finally, I solved this problem.
<script>
$(document).ready(function () {
$('.save-btn').attr('disabled', true);
$('#CommentResponse').change(function () {
let cmtData = $("#CommentResponse").val();
if (cmtData !=null ) {
$('.save-btn').attr('disabled', false);
}
if(cmtData == "")
{
$('.save-btn').attr('disabled', true);
}
})
$('#StatusResponse').change(function () {
let statusData= $(this).val();
if (statusData != 0) {
$('.save-btn').attr('disabled', false);
}
else
{
$('.save-btn').attr('disabled', true);
}
})
});
</script>
<div class="row border-top pt-2">
<div class="col-md-4">
<span>Decision</span><span asp-validation-for="BurnOut.Status"></span>
<select asp-for="BurnOut.Status" id="StatusResponse" asp-items="Html.GetEnumSelectList<ApplicationDecision>()" class="form-control ">
<option></option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Comments</span><span asp-validation-for="BurnOut.Remarks"></span>
<textarea class="form-control " id="CommentResponse" asp-for="BurnOut.Remarks" style="height:100px" maxlength="2000"></textarea>
</div>
</div>
<div class="row border-top p-2">
<div class="col">
<input type="submit" value="Save" class="btn btn-blueTwo float-right save-btn" />
</div>
</div>
I am trying to show error messages on toast. I have a form with a submit button as below.
my html form is:
file.html
<form method="post" enctype="multipart/form-data" >
<div class="form-group">
<label>Select Layer Type</label>
<select class="form-control select2" style="width: 100%;">
<option value="vector">Vector Layer</option>
<option value="rasterfile">Raster Image</option>
</select>
</div>
<div class="card-footer"> <button type="submit" class="btn btn-primary toastrDefaultError">Upload File</button></div>
</form>
And js is
$(function () {
$('.select2').select2()
toastr.error('Error...') // I want to display msg from context instead
})
The form action is
menu.html
<li class="nav-item ">
<a href="/fileupload/" class="nav-link">
<i class="nav-icon fas fa-book"></i>
<p> File Upload </p>
</a>
</li>
My python code is
fileupload.py
def file_execution(request):
try:
#something processing
except Exception as Er:
print('Er:',Er)
context['msg'] = 'Some error occured !!'
return render(request,'file.html',context)
urls.py
path('fileupload/', fileupload.file_execution, name='fileupload'),
If I change the button type to type="button", I will get the toastr. How can I add toastr message to my type="submit" button tag.
The click on File Upload menu of menu.html render file.html page.
I want to show the context message in the toastr on submitting the form
You're doing it wrong.
Here you get a toast on button click... no matter what the server answer. No matter if there is a request.
This is not what you want to do.
$(function () {
$('.toastrDefaultError').click(function() {
toastr.error('Error...')
});
})
<button type="submit" class="btn btn-primary toastrDefaultError">Upload File</button>
Change the form to remove the toast
<form method="post" enctype="multipart/form-data" >
<div class="form-group">
<label>Select Layer Type</label>
<select class="form-control select2" style="width: 100%;">
<option value="vector">Vector Layer</option>
<option value="rasterfile">Raster Image</option>
</select>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-primary">Upload File</button>
</div>
</form>
On submitting, the server do his job and give the same page, with a success message or an error message. I put both in the example but don't code that.
<form method="post" enctype="multipart/form-data" >
<div class="form-group">
<label>Select Layer Type</label>
<select class="form-control select2" style="width: 100%;">
<option value="vector">Vector Layer</option>
<option value="rasterfile">Raster Image</option>
</select>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-primary">Upload File</button>
</div>
<p class='errorMsg'>There is an error</p>
<p class='successMsg'>There is an error</p>
</form>
Verify everything works correctly, then use this JS
$(function () {
//Find every errorMsg on the page and toast them
$('.errorMsg').each( e => {
const txt = $(e).text();
toastr.error(txt)
})
//Find every successMsg on the page and toast them
$('.successMsg').each( s => {
const txt = $(s).text();
toastr.tost(txt)
})
})
I have a form with more than 10 input/select options but i wish to show most of this form inputs when 4 of my fields specifically are filled.
I've done some research and found
$('input[type="text"]').each(function(){
// do my things here...
});
but this has 2 issues:
It doesn't work when i fill inputs
One of my fields is select option and here only tries to get inputs
Code
$(function() {
// show choices DIV only if all fields are filled.
$('input[type="text"]').each(function() {
if ($(this).val() != "") {
$('.choices').show();
} else {
$('.choices').hide();
}
});
});
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<form action="" method="POST">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<div class="sm-form-design">
<input id="seq_no" type="text" class="form-control" name="seq_no" required>
<label for="seq_no" class="control-label">Seq No.</label>
</div>
</div>
</div>
<div class="col-md-9">
<div class="form-group">
<div class="sm-form-design">
<input id="question" type="text" class="form-control" name="question" required>
<label for="question" class="control-label">Question</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 sm-form-design">
<select name="type" id="type" class="form-control">
<option value="dropdown">Dropdown</option>
<option value="multiple">Multiple</option>
<option value="radio">Radio Buttons</option>
<option value="input">Input</option>
</select>
<label for="type" class="control-label">Type</label>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="sm-form-design">
<input type="text" name="quiz_time" class="form-control" id="masked-input-time" required>
<label for="quiz_time" class="control-label">Time *</label>
</div>
</div>
</div>
</div>
<!-- show this part when all fields above are filled -->
<div class="row choices">
<div class="col-md-12">
<h5>Choices:</h5>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
Question
How can I validate all my first 4 fields before showing rest of the form?
Any idea?
While Shiladitya's answer works, and is closest to your own code, I find it cleaner to handle forms by serializing data into an object as input occurs. This allows you to more easily reason about validation, as you only have to validate an object, not DOM elements.
Here is a pared down example:
$(function() {
const formData = {}
const $form = $('#form-a')
const $partTwo = $('#part-2')
// some real validation here
const isValidPartOne = data =>
data.a && data.b && data.c
const showPartTwo = () => $partTwo.show()
$form.on('input', ({target}) => {
formData[target.name] = target.value
// form data is available at all times
console.log('formData =', formData)
if (isValidPartOne(formData)) {
showPartTwo()
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form-a">
<div id="part-1">
PART 1
<input name="a" />
<input name="b" />
<select name="c">
<option value="" disabled selected>Choose One</option>
<option value="a">A</option>
<option value="b">B</option>
</select>
</div>
<div id="part-2" style="display:none;">
PART 2
<input name="d" />
</div>
</form>
Here you go with a solution
$(function() {
$('.choices').hide();
// show choices DIV only if all fields are filled.
$('select').change(function() {
validateInput();
});
$('input[type="text"]').keyup(function() {
validateInput();
});
function validateInput() {
var valid = true;
$('input[type="text"], select').each(function() {
if ($(this).val() === "") {
valid = false;
}
});
if (valid) {
$('.choices').show();
} else {
$('.choices').hide();
}
}
});
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<form action="" method="POST">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<div class="sm-form-design">
<input id="seq_no" type="text" class="form-control" name="seq_no" required>
<label for="seq_no" class="control-label">Seq No.</label>
</div>
</div>
</div>
<div class="col-md-9">
<div class="form-group">
<div class="sm-form-design">
<input id="question" type="text" class="form-control" name="question" required>
<label for="question" class="control-label">Question</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 sm-form-design">
<select name="type" id="type" class="form-control">
<option value="dropdown">Dropdown</option>
<option value="multiple">Multiple</option>
<option value="radio">Radio Buttons</option>
<option value="input">Input</option>
</select>
<label for="type" class="control-label">Type</label>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="sm-form-design">
<input type="text" name="quiz_time" class="form-control" id="masked-input-time" required>
<label for="quiz_time" class="control-label">Time *</label>
</div>
</div>
</div>
</div>
<!-- show this part when all fields above are filled -->
<div class="row choices">
<div class="col-md-12">
<h5>Choices:</h5>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
OnChange of any input, please iterate through all the inputs just to check whether each input is empty or has value.
Here you go with a solution for your problem 1 that you mentioned in the comment box
$(function() {
$('.choices').hide();
// show choices DIV only if all fields are filled.
$('select').change(function() {
validateInput();
});
$('input[type="text"]').keyup(function() {
validateInput();
});
// --- Whenever you make an action you can call this method to validate your inputs ----
function validateInput() {
var valid = true;
$('input[type="text"], select').each(function() {
if ($(this).val() === "") {
valid = false;
}
});
if (valid) {
$('.choices').show();
} else {
$('.choices').hide();
}
}
});
I am not in a place to properly test but looking at your function I would make the following changes,
$(function() {
// show choices DIV only if all fields are filled.
var flag = false
$('input[type="text"]').each(function() {
if ($(this).val() != "") {
flag = true
} else {
flag = false
}
});
if (flag) {
$('.choices').show();
} else {
$('.choices').hide();
}
});
$('input[type="text"]').keyup(function() {
// call function
});
$('input[type="text"]').keydown(function() {
// call function
});
Below I have been trying to get the eoddesc field to be required depending on whether the completetasks value is Yes or No. I made a quick script which executes upon click of the submit button. As of now, it can remove the required property from the eoddesc input, but if the value is changed back to Yes, then it stays without a required attribute.
<form action="/addeod" method="POST" id="addEODForm">
<div class="modal-body">
<div class="row">
<div class="col-8 mt-4">
<label for="completetasks">Did I complete all my tasks that were due today and/or overdue?</label>
</div>
<div class="col-4 mb-3">
<select class="browser-default custom-select" id="completetasks" name="success" style="margin-top: 30px;" required>
<option value="" selected>Yes/No:</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
<div class="row">
<div class="col-12 mb-2">
<div class="md-form">
<textarea id="eoddesc" class="form-control md-textarea" name="ifno" length="120" rows="3" required></textarea>
<label for="eoddesc">If not, please explain why:</label>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="md-form">
<textarea id="eodsum" class="form-control md-textarea" name="summary" length="120" rows="3" required></textarea>
<label for="eodsum">Briefly summarize all you've completed today:</label>
</div>
</div>
</div>
</div>
<div class="modal-footer d-block">
<div class="row w-100">
<div class="col-sm-6 col-12 "><a type="button" class="btn btn-outline-info waves-effect w-100" data-dismiss="modal">Close</a></div>
<div id="eodSumButton" class="col-sm-6 col-12"><button type="submit" class="btn btn-info waves-effect waves-light w-100">Submit</button></div>
</div>
</div>
</form>
<script>
$(document).ready(function(){
$("#eodSumButton").click(function () {
if ($("#completetasks").val() == "Yes"){
console.log("NOT required");
$("#eoddesc").removeAttr("required");
}
if ($("#completetasks").val() == "No"){
console.log("required");
$("#eoddesc").attr("required");
}
})
});
</script>
Why does the form not update with the required field? When I console.log it, everything outputs as expected, but it does not want to update the attr.
You just need to change the event listener for your completetasks input instead of eodSumButton. Otherwise the code only checks that when you try to submit:
$(document).ready(function(){
$("#completetasks").on('change',function () {
if ($("#completetasks").val() == "Yes"){
console.log("NOT required");
$("#eoddesc").removeAttr("required");
}
if ($("#completetasks").val() == "No"){
console.log("required");
$("#eoddesc").attr("required");
}
})
});
The problem is that the "required" is evaluated before the submit. So when you press submit, it sees the field as "not required" and then it adds the attribute required.
EDIT:
I think I figured out your problem:
$(document).ready(function(){
$("#completetasks").click(function () {
if ($("#completetasks").val() == "Yes"){
$("#output").html("NOT required");
$("#eoddesc").removeAttr("required");
}
if ($("#completetasks").val() == "No"){
$("#output").html("required");
$("#eoddesc").prop("required",true);
}
})
});
When using "attributes" like required and checked, Jquery considers them a property, so to add "required" use .prop. But to remove, you still use removeAttr.
I hope this fixes your problem.
Fixed, the comment of Bharat Geleda is the true correct answer.
I have select with options. On option change i show different divs and use bootstrap validator before submit. If input is empty and press on button it goes to disable. And on option change button is not activating. How can I reset inputs and button on option change?
$('#shexsselect').on('change', function() {
value = $(this).val();
if (value == 1) {
//do something
} else {
//do something
}
});
$(document).ready(function() {
$('#form_fin').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon',
invalid: 'glyphicon',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
pinofsv: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'for label 2'
},
}
},
shexsselect: {
validators: {
notEmpty: {
message: 'choose'
}
}
},
voen: {
validators: {
notEmpty: {
message: 'for label2'
}
}
}
}
});
});
<form name="form_fin" id="form_fin" action="" method="POST">
<div class="col-sm-12">
<div class="form-group" id="shexsdiv">
<label>Selectionn: </label>
<select class="form-control " name="shexsselect" id="shexsselect" required>
<option value='' selected disabled>Choose</option>
<option value='1'>First</option>
<option value='2'>Second</option>
</select>
</div>
</div>
<div class="col-sm-12" id="voendiv">
<div class="form-group">
<label>label2:</label>
<input type="text" class="form-control " name="voen" id="voen">
</div>
</div>
<div class="col-sm-12" id="fin_input">
<div class="form-group">
<label>Label2:</label>
<div class="input-group">
<input type="text" class="form-control" name="pinofsv" id="pinofsv" required />
</div>
</div>
</div>
<div class="col-sm-12">
<button type="submit" class="btn btn-info" name="checkfin" id="checkfin">Submit</button>
</div>
</form>
I tried excluded: [':disabled'], but it did not help and by jquery tried to reset and clear, but doesn not help
Add onchange inside your select and there you call your function to reset values of input fields.
Below is working code:
function resetFields() {
document.getElementById("voen").value = "";
document.getElementById("pinofsv").value ="";
}
<form name="form_fin" id="form_fin" action="" method="POST">
<div class="col-sm-12">
<div class="form-group" id="shexsdiv">
<label>Selectionn: </label>
<select onchange="resetFields()" class="form-control " name="shexsselect" id="shexsselect" required>
<option value='' selected disabled>Choose</option>
<option value='1'>First</option>
<option value='2'>Second</option>
</select>
</div>
</div>
<div class="col-sm-12" id="voendiv">
<div class="form-group">
<label>label2:</label>
<input type="text" class="form-control " name="voen" id="voen">
</div>
</div>
<div class="col-sm-12" id="fin_input">
<div class="form-group">
<label>Label2:</label>
<div class="input-group">
<input type="text" class="form-control" name="pinofsv" id="pinofsv" required />
</div>
</div>
</div>
<div class="col-sm-12">
<button type="submit" class="btn btn-info" name="checkfin" id="checkfin">Submit</button>
</div>
</form>
Read here more about onchange event