I'm trying to validate some inputs available in a modal:
<div id="modal-section" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Manage</h3>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="tim-icons icon-simple-remove"></i>
</button>
</div>
<div class="modal-body">
<div class="modal-message alert" style="display:none"></div>
<form>
<fieldset>
<legend>Details</legend>
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="form-group">
<label class="control-label">name</label>
<input type="text" class="required form-control black-content">
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>
Informations
</legend>
<div id="questions-container">
<div class="card" data-id="1">
<div class="card-body">
<div class="row">
<div class="col-xs-12 col-sm-8">
<div class="form-group">
<label for="question-name" class="control-label">description *</label>
<input type="text" class="required form-control" data-id="1">
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="button" id="validate" class="btn btn-primary">save</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">close</button>
</div>
</div>
</div>
When I press the button validate this function will fire:
var missingRequired = false;
$('#modal-section .required').each(function () {
$(this).closest('.form-group').removeClass('has-error');
if ($(this).val() == '' || $(this).val() == undefined) {
$(this).closest('.form-group').addClass('has-error');
missingRequired = true;
}
});
Essentially, this will check all the input that have the required class; only the input name will have the red, the other inputs available in the questions-container will not.
If I look at the HTML I can see that the class has-error is added also to the input available in questions-container but the inputs aren't colored.
The CSS available on the element I have:
theme class:
.white-content .card:not(.card-white) label:not(.btn) {
color: #344675;
}
bootstrap class (commented in the question-container element)
.has-error .form-control-feedback, .has-error .control-label {
color: #ec250d;
}
Why is this happening?
From what i can tell with the information provided, your error CSS rule is not specific enough. Try changing it to:
.card .form-group.has-error label.control-label {
color: #ec250d;
}
Related
I have the following html
<div class="modal inmodal" id="handleUserModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content animated fadeIn">
<form class="form">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Add user</h4>
</div>
<div class="modal-body">
<div class="form-group row profile_field">
<label class="col-lg-3 col-form-label">First Name</label>
<div class="col-lg-9">
<input id="firstname" name="firstname" type="text" placeholder="First Name" class="form-control">
</div>
</div>
<div class="form-group row reset_password_field mb-0 mt-4">
<div class="col-lg-offset-2 col-lg-10">
<div class="i-checks reset_password_check" id="password_check">
<label> <input id="passresetcheck" type="checkbox" /> Reset password </label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="saveButton">Save</button>
</div>
</form>
</div>
</div>
</div>
Now i have tried to the following to uncheck
using the id of the input
$('passresetcheck').prop('checked',false)
also
$('passresetcheck').attr('checked',false)
using modal id
$("#handleUserModal .modal-body").find('input:radio, input:checkbox').prop('checked', false);
Finally what worked for me, is also to remove the checked class
// this is for the input
$('#passresetcheck').prop('checked', false);
// this is to remove checked class
$("#password_check div").each(function(index,elem){
if (elem.classList.contains("checked")) {
elem.classList.remove("checked");
}
})
My observation what happens to html when we check
This is without any checking
<div class="form-group row reset_password_field mb-0 mt-4">
<div class="col-lg-offset-2 col-lg-10">
<div class="i-checks reset_password_check" id="password_check">
<label> <input id="passresetcheck" type="checkbox" /> Reset password </label>
</div>
</div>
</div>
after checking it gets converted like this, it adds a class checked in the div inside i-checks
<div class="i-checks reset_password_check" id="password_check">
<label class="">
<div class="icheckbox_square-green checked" style="position: relative;">
<input id="passresetcheck" type="checkbox" style="position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"></ins>
</div>
Reset password
</label>
</div>
Always check first if you capture something or not. In your case $('passresetcheck') is undefined.
You need to search by ID using # symbol like here $('#passresetcheck'):
const checkbox = $('#passresetcheck')
checkbox.prop('checked', false)
setTimeout(() => checkbox.prop('checked', true), 2000)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal inmodal" id="handleUserModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content animated fadeIn">
<form class="form">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Add user</h4>
</div>
<div class="modal-body">
<div class="form-group row profile_field">
<label class="col-lg-3 col-form-label">First Name</label>
<div class="col-lg-9">
<input id="firstname" name="firstname" type="text" placeholder="First Name" class="form-control">
</div>
</div>
<div class="form-group row reset_password_field mb-0 mt-4">
<div class="col-lg-offset-2 col-lg-10">
<div class="i-checks reset_password_check" id="password_check">
<label> <input id="passresetcheck" type="checkbox" /> Reset password </label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="saveButton">Save</button>
</div>
</form>
</div>
</div>
</div>
I have this Bootstrap code which I would like to use to generate address and implement copy button functionality:
<div class="modal fade" id="bitcoinModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="container">
<div class="offset-top-20 text-md-left">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Copy address</h3>
</div>
<div class="section-60 offset-top-35">
<div class="offset-top-20 text-md-center">
<form class="rd-mailform form-inline-custom text-left" data-form-output="form-output-global" data-form-type="subscribe" method="post" action="http://.........">
<div class="form-group form-group-outside">
<div class="input-group">
<label class="form-label form-label-outside text-dark" for="forms-subscribe-email">Bitcoin Address</label>
<input class="form-control" id="forms-subscribe-email" type="text" name="bitcoin_address" value="3J98t1WpEZ73CNmQviecrnyiWrnqRhWNLy " data-constraints="#Required"/>
</div>
<div class="input-group-btn">
<button class="btn btn-width-165 btn-primary" type="submit">Copy</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
How I can copy the content from the input item into the clipboard? How I can change the text to "Copied"
This should work:
function copyToClipboard(e, btn) {
e.preventDefault(); // prevent submit
var str = document.getElementById("forms-subscribe-email");
str.select();
document.execCommand('copy');
btn.innerHTML = "Copied!";
return false; // prevent submit
}
<div class="modal fade" id="bitcoinModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="container">
<div class="offset-top-20 text-md-left">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Copy address</h3>
</div>
<div class="section-60 offset-top-35">
<div class="offset-top-20 text-md-center">
<form class="rd-mailform form-inline-custom text-left" data-form-output="form-output-global" data-form-type="subscribe" method="post" action="http://.........">
<div class="form-group form-group-outside">
<div class="input-group">
<label class="form-label form-label-outside text-dark" for="forms-subscribe-email">Bitcoin Address</label>
<input class="form-control" id="forms-subscribe-email" type="text" name="bitcoin_address" value="3J98t1WpEZ73CNmQviecrnyiWrnqRhWNLy " data-constraints="#Required" />
</div>
<div class="input-group-btn">
<button class="btn btn-width-165 btn-primary" onclick="return copyToClipboard(event, this);">Copy</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
function copyKey(id) {
var copyText = document.getElementById(id);
copyText.select();
document.execCommand("copy");
}
function copy_IP() {
var copy_Text = document.getElementById('our_ip');
//create temporary input to copy text as our input is hidden so we need to create another input
var tempInput = document.createElement("input");
tempInput.style = "position: absolute; left: -1000px; top: -1000px";
tempInput.value = copy_Text.value;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);
//show success message
toastr.info(copyText.value, 'IP Copied to Clipboard');
}
You can use any of above function
Use execCommand for this.
function myFunction() {
var copyTextfield = document.getElementById("myInput");
copyTextfield.select();
document.execCommand("copy");
alert("Copied the text: " + copyTextfield.value);
copyTextfield.value = "Copied";
}
<input type="text" value="Hello World" id="myInput">
<button onclick="myFunction()">Copy text</button>
I would like to know how to use Bootstrap responsive columns when resizing a containing div, and not just the viewport size.
I would like the inputs inside the form to stack side by side as I make the modal wider.
Html :
<button>open
</button>
<div class="modal" data-keyboard="false" data-backdrop="false" tabindex="-1" role="dialog" id="pesquisa_modal" style="pointer-events: none">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-primary text-white" id="header" style="cursor: move">
Modal
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-auto">
<label for="Form1">Form1</label>
<input type="text" class="form-control" id="Form1">
</div>
<div class="form-group col-auto">
<label for="Form2">Form2</label>
<input type="text" class="form-control" id="Form2" >
</div>
<div class="form-group col-auto">
<label for="Form3">Form3</label>
<input type="text" class="form-control" id="Form3">
</div>
<div class="form-group col-auto">
<label for="Form4">Form4</label>
<input type="text" class="form-control" id="Form4">
</div>
</div>
</form>
</div>
</div>
</div>
Fiddle : https://jsfiddle.net/p204kwjz/6/
Can I make the inputs continue to stack horizontally as I enlarge the containing div?
The problem is that that the inputs are not "fluid" when I enlarge the div wide enough to fit them all in a row. Also, when the containing div is too small they overflow the div horizontally.
The context here is that the forms will be created dynamically, so I need some kind of smart layouting.
If you want your columns to take up the full width (stack horizontally) in bootstrap use col-md-12 on your form and wrap it in a div with class form-row. Basically bootstrap assumes each row is composed of 12 columns.
<div class="modal" data-keyboard="false" data-backdrop="false" tabindex="-1" role="dialog" id="pesquisa_modal" style="pointer-events: none">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-primary text-white" id="header" style="cursor: move">
Modal
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-md-12">
<label for="Form1">Form1</label>
<input type="text" class="form-control" id="Form1">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="Form2">Form2</label>
<input type="text" class="form-control" id="Form2" >
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="Form3">Form3</label>
<input type="text" class="form-control" id="Form3">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="Form4">Form4</label>
<input type="text" class="form-control" id="Form4">
</div>
</div>
</form>
</div>
</div>
</div>
Here is a fiddle.
The form-group and the col-auto classes aren't playing nicely. You can achieve fluid inputs by nesting col-auto inside form-group
fiddle
<button>open
</button>
<div class="modal" data-keyboard="false" data-backdrop="false" tabindex="-1" role="dialog" id="pesquisa_modal" style="pointer-events: none">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-primary text-white" id="header" style="cursor: move">
Modal
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group">
<div class="col-auto">
<label for="Form1">Form1</label>
<input type="text" class="form-control" id="Form1">
</div>
</div>
<div class="form-group">
<div class="col-auto">
<label for="Form2">Form2</label>
<input type="text" class="form-control" id="Form2">
</div>
</div>
<div class="form-group">
<div class="col-auto">
<label for="Form3">Form3</label>
<input type="text" class="form-control" id="Form3">
</div>
</div>
<div class="form-group">
<div class="col-auto">
<label for="Form4">Form4</label>
<input type="text" class="form-control" id="Form4">
</div>
</div>
</div>
</form>
</div>
</div>
You are using bootstrap 4.
In bootstrap 4, if you code for medium, say 2 divs of col-md-6 and use in smaller screen, div takes the full width and stacking happens, ie: both the divs are one above the other.
div {
display: flex;
margin: 0px;
padding 0px;
}
.col-md-6 {
/* Assuming that col-md-6 width is 1000px */
width: 1000px;
}
<div>
<div class="col-md-6" style="background-color:red;">
Sri harsha
</div>
<div class="col-md-6" style="background-color:blue;">
Achyuthuni
</div>
</div>
That is because, unlike Bootstrap 3, Bootstrap 4 is made using flex boxes.
To see how flex works, look into this link
See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
Here is my trying:
$('#modalSetComplain').on('show.bs.modal', function (e) {
FillinputComplaintype2();
});
This is function which will fill the Select dynamically
function FillinputComplaintype2() {
var options = $("#inputComplaintype2");
$.each( datelist , function (val, text) {
options.append($("<option />").val(text.Name).text(text.Id));
});
}
and this is my modal
<div class="modal modal-flex " id="modalSetComplain">
<div class="modal-dialog" style="min-width: 900px; max-width:1000px;width:auto">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"></span></button>
<h4 class="modal-title"> </h4>
</div>
<div class="modal-body">
<div class="form-horizontal" >
<div class="form-group">
<label class="col-sm-2 control-label" for="inptComplaintitle" style="width:15%"><strong> </strong></label>
<input type="text" name="inptComplaintitle" class="form-control" id="inptComplaintitle" style="width:60%"/>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputComplaintype2" style="width:15%"><strong> </strong></label>
<select class="form-control" id="inputComplaintype2" style="width:60%"></select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"></button>
<button type="button" onclick="SaveComplains();" class="btn btn-green ladda-button">
</button>
</div>
</div>
</div>
</div>
My modal Successfully appeared but how can I fill id="inputComplaintype2"
daynamically on modal load ?
also
$('#modalSetComplain').on('show.bs.modal', function (e) {
didn't fire its event even it located in document.ready
I think you should use the shown event (after the modal has appeared) rather than the show event.
$('#modalSetComplain').on('shown.bs.modal', function (e) {
FillinputComplaintype2();
});
I have the following lines of code in my website - CodePen.
What I am trying to do, is make it so that the user must fill in the form first, before downloading an item:
<div class="container">
<!-- Trigger the modal with a button -->
Download Item #1
Download Item #2
<!-- Modal -->
<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">Modal Header</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
How can I make it so that when the user selects the first or second button on the page, it will send this information to the submit button?
You could store the link in a variable. Then, when the button is clicked, check if the fields are empty (and apply any validation rules). If not empty, apply the submit to the form.
$link = 'example.com/download.pdf';
$('.button').click(function(){
// CHECK THE FIELDS ARE NOT EMPTY
// APPLY YOUR OWN VALIDATION
if($field1 = $('.field1').val() != '' && $('.field2').val() != ''){
// DO WHAT YOU NEED TO DO WITH THE LINK
$('form').submit();
}
})
On a side note, it's possible that you were down-voted (not by myself) for not providing us with your attempts to solve your own problem. You provided us with your html but not any of your tested logic.
You add a click handler to your button in JavaScript :
var fieldsAreReadyToBeSent = function() {
// Validation code goes here
// return true if valid & false if invalid
};
document.querySelector("[type=submit]").addEventListener("click", function() {
if(!fieldsAreReadyToBeSent()) {
event.preventDefault();
}
});
The method event.preventDefault() prevents your your form from being submitted if it is considered invalid!
A demo :
var fieldsAreReadyToBeSent = function() {
return false; // FOR THIS DEMO, ALWAYS RETURN FALSE
};
document.querySelector("[type=submit]").addEventListener("click", function() {
if(!fieldsAreReadyToBeSent()) { // FOR THIS DEMO, THIS IS ALWAYS TRUE
event.preventDefault();
}
});
<div class="container">
<!-- Trigger the modal with a button -->
Download Item #1
Download Item #2
<!-- Modal -->
<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">Modal Header</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>