I am using Bootstrap within a Symfony 2.7 based WebApp. Now I came across a strange problem when using the Bootstrap collapse function within a Form:
The collapse function is used to toggle the visibility of DOM objects. If use this function to toggle an element (e.g. a div container) within a Form, the form validation is triggered.
When I run the my code (see below) on my server, a "This field is required" messages pops up, as soon as a toggle the container using the button.
This does not seem to work here. The Snippet below works just fine. However you can see problem when running the Snippet on w3Schools.com instead. Click on this link to get to one of their examples. Replace the example code with my Snippet and run it.
The effect is the same es on my server: A click on the toggle button will trigger the form validation.
How can this bee? What is difference with the Snippet here (works OK) and the Snippet on my server or at w3Schools.com on the other hand (does not work)?
How can I avoid the form validation?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form action="" method="post" name="custom">
<div class="form-group">
<label class="control-label required" for="name">Name</label>
<input id="name" class="form-control" type="text" required="required" name="custom[name]">
</div>
<button class="btn btn-success" data-target="#toggleContainer" data-toggle="collapse" aria-expanded="true">Toggle</button>
<div id="toggleContainer" aria-expanded="true" style="">
1</br>
2</br>
3</br>
</div>
</form>
</div>
</body>
</html>
Add button attribute type="button" If you are not specifying by default it will take as type="submit"
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form action="" method="post" name="custom">
<div class="form-group">
<label class="control-label required" for="name">Name</label>
<input id="name" class="form-control" type="text" required="required" name="custom[name]">
</div>
<button type="button" class="btn btn-success" data-target="#toggleContainer" data-toggle="collapse" aria-expanded="true">Toggle</button>
<div id="toggleContainer" aria-expanded="true" style="">
1</br>
2</br>
3</br>
</div>
</form>
</div>
</body>
</html>
Related
I took a bootstrap and jQuery datepicker online since it was easier for me, it worked perfectly on localhost, but now after uploading it online, it doesn't work, I click on the input, and usually a calendar would pop up, now I just have a plain text input.
This is the full file where I use the datepicker:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="css/reservation.css" rel="stylesheet">
</head>
<body>
<section class="book-a-table">
<h1 class="title">Book</h1>
<form action="choose-time.php" class="contact-form row">
<div class="form-field col-lg-6">
<input id="name" class="input-text js-input" name="name" type="text" required>
<label class="label" for="name">Ime</label>
</div>
<div class="form-field col-lg-6 ">
<div class='input-group date' id='datetimepicker1'>
<span class="input-group-addon">
<input type='text'class="form-control input-text js-input" id="date" name="date"/>
</span>
<input class="submit-btn" name="submit" type="submit" value="Choose time >">
</form>
</section>
I had some script for disabling dates, I removed it but I still had no changes, tried to modify it, no changes, I only get a blank input text form.
It might be blocked by your server since it violates the Content Security Policy directive.
Check whether it shows in Browser Console (Ctrl + Shift + i).
Best way is to download Bootstrap files (e.g. https://getbootstrap.com/docs/4.3/getting-started/download/), upload it to your server and add this in your html
<link rel="stylesheet" href="./css/bootstrap.min.css">
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/style_index.css">
<script src="js/testjs.js" charset="utf-8"></script>
<script src="js/sweetalert2.all.min.js"></script>
</head>
...
<body>
<div class="search">
<input type="text" id="search" name="search" required>
<button name="button" onclick="swal('Hi!')">Search1</button>
<button name="button2" onclick="alert('hi2')">Search2</button>
</div>
...
this is my code.
Search2 button works well, but Search1 button doesn't.
When I click this button, page has a lack and not work in IE11.
but in chrome it has no problem... I can't figure out why it does...
plz help me.
Sweetalert2 uses Promises but promises are not implemented by IE11. You have to include a polyfill (it's written in the docs). If you don't include the polyfill, you will have an error in the developer console logs (F12) "Promise" is undefined.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.26.12/sweetalert2.all.min.js"></script>
<!-- Include a polyfill for ES6 Promises -->
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill"></script>
</head>
<body>
<div class="search">
<input type="text" id="search" name="search" required>
<button name="button" onclick="swal('Hi!')">Search1</button>
<button name="button2" onclick="alert('hi2')">Search2</button>
</div>
</body>
</html>
I wish to use x-editable and bootstrap-datetimepicker on the same page, but not on the same element. When doing so, however, the css required for x-editable (bootstrap-editable.css) corrupts bootstrap-datetimepicker, and it looks like the first image below instead of the desired second image. Note that x-editable's JavaScript has not even been included on the page, thus it must be just the bootstrap-editable.css.
To troubleshoot, I used Chrome's and Firefox's inspector to see what CSS is applied, however, when drilling down in the element tree, the JavaScript generated div.bootstrap-datetimepicker-widget automatically closes which prevent's the Chrome dev-tools from being able to view the CSS which is applied to it.
How can the CSS which is applied to this element be determined so that some sort of fix be created?
https://jsbin.com/yanawuv
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/bootstrap3-editable/css/bootstrap-editable.css" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/eonasdan-bootstrap-datetimepicker#4.17.47/src/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</body>
</html>
I am using parsley.js for form validation. I read through the documentation on the website and followed their examples, but it does not seem to work as expected.
Here's the test file I created:
<doctype>
<html>
<head>
<title>Parsley</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src ="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="parsley.js"></script>
<link rel="stylesheet" href="parsley.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-8">
<h2>Parsley.js Form Validation</h2>
<form id="testForm" data-parsley-validate>
<label>Name</label><br />
<input type="text" name="name" data-required="true">
<br /><br />
<input type="submit" value="Submit" class="btn btn-success">
</form>
</div>
</div>
</div>
</body>
</html>
Any suggestions on what's going wrong?
You'll need to use data-parsley-required or directly required in your DOM.
Here are all the built-in validators: http://parsleyjs.org/doc/index.html#validators
Best
javascript file import should be in following order.
JQuery.js
Parsley.js
Common.js
<script type="text/javascript" th:src="#{/js/jquery-2.1.4.min.js}"></script>
<script type="text/javascript" th:src="#{/js/parsley.min.js}"></script>
<script type="text/javascript" th:src="#{/js/common.js}"></script>
If it's not like this, some component can't be known and it'll not working.I know it is a bit late, but I hope it can help someone.
I am new to JQuery Mobile and Javascript in general, so I am trying to learn it by doing a project. I am using JQuery mobile to design a web app and I require a few text inputs. In the JQuery documentation, there are text input examples that have a blue halo when they are clicked, and when the mouse moves away, the blue halo vanishes as well. I copied the provided code, but my text box does not have the same effect. I then tried inspecting the elements in the documentation and I realized that when the text box was clicked, the text input element gained an attribute called "ui-focus". How is this done?
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="jquery.mobile-1.4.0/jquery.mobile-1.4.0.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<link rel="stylesheet" href="jquery.mobile-1.4.0/jquery.mobile-1.4.0.min.css" />
<link rel="stylesheet" href="jquery.mobile-1.4.0/jquery.mobile.structure-1.4.0.min.css" />
</head>
<body style class="ui-mobile-viewport ui-overlay-a">
<div role="main" class="ui-content">
<label for="basic">Email:</label>
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
<input type="text" name="name" id="basic" value=""/>
</div>
<label for="basic">Password:</label>
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
<input type="text" name="name" id="basic" value=""/>
</div>
</div>
</body>
You have copied rendered HTML code. JQM wraps input with a div to give it a new look. You don't have to add any extra code, only input tag, JQM will take care of the rest.
<input type="text" />