I have a form inside a Bootstrap carousel slide. I can not enter spaces in the text boxes in the fields and cannot see why. Here's my code:
<section class="carousel slide" data-ride="carousel" data-interval="false" data-wrap="false">
<div class="carousel-inner" role="listbox">
<div class="item active">
<form class="form-inline" name="myForm">
<div class="form-group">
<input name="title" type="text" class="form-control" />
</div>
<button type="submit" class="btn btn-success btn-link">Submit</button>
</form>
</div>
</div>
</section>
You can capture the spacebar keypress (code 32) and prevent the propagation to the carousel.
$('input').on('keydown', function (e) {
if (e.keyCode == 32) {
e.stopPropagation();
}
});
I would also prevent keyboard navigation on the carousel or people using the arrows might navigate through carousel slides.
<section class="carousel slide" data-ride="carousel" data-interval="false" data-wrap="false" data-keyboard="false">
Live example: http://www.bootply.com/phVgpOYnO0
Related
In a form I have two buttons save and cancel. In the save button I have done validations for input and kendo date picker but the problem is
cancel button purpose is clear the input values.while clear the values automatically validation messages are showing.
How can I prevent the validations for cancel button in angular 6
<form (ngSubmit)="f.form.valid && saveFilter()" #f="ngForm" novalidate>
<div class="formNew">
<label for="name">Custom Filter Name:</label>
<input type="text" [(ngModel)]="filtername" name="filter" #filter="ngModel" placeholder="Filter name" maxlength="50" [ngClass]="{ 'custom-filtername': f.submitted && !filter.dirty}" required />
</div>
<kendo-datepicker class="kendoCalendarPickerBox" [ngClass]="{'custom-datepciker':f.submitted &&!isdatepicker.dirty &&!isChecked}" [(ngModel)]= "Datevalue" required></kendo-datepicker>
<div class="footer">
<span class="foot_left">
<button type="button" class="btn blueBtn lftBtn" (click)="FilterAction('Delete')">Delete</button>
</span>
<span class="foot_right">
<button class="btn blueBtn"> {{saveButtonName}}</button>
<button type="button" class="btn btnDefault" (click)="FilterAction('Cancel')">Cancel</button>
</span>
</div>
</form>
I developed the following login page in Ionic:
<form name="login_form" class="form-container" novalidate>
<div class="byf-logo">
<img src="img/logo-text-clear-transparent.png" />
</div>
<div class="list list-inset byf-login-form">
<label class="item item-input">
<img src="img/icons/person.png" alt="">
<input type="email" placeholder="Email" ng-model="user.email" required>
</label>
<label class="item item-input">
<img src="img/icons/locker.png" alt="">
<input type="password" placeholder="Password" ng-model="user.password" required>
</label>
<button class="button button-block button-assertive" ng-click="login(user)" ng-disabled="login_form.$invalid">CONNEXION</button>
</div>
</form>
<div ng-show="error">
<p class="message error"><i>{{error}}</i></p>
</div>
I expect the form to be sliding up a little when the password input (second input) is in focus because keyboard overlaps it:
It works perfectly in another page without writing any particular code so I guess it is default behavior.
Any idea why it doesn't slide here ?
I had this same problem and the only way i could get it to work was as follows
this.keyboard.onKeyboardShow().subscribe(e => {
console.log('Keyboard height is: ' + e.keyboardHeight);
jQuery('body').animate({ 'marginTop': - e.keyboardHeight + 'px' }, 200);
});
this.keyboard.onKeyboardHide().subscribe(e => {
jQuery('body').animate({ 'marginTop': 0 + 'px' }, 200);
});
I have a form that is validated using Bootstrap Validator http://1000hz.github.io/bootstrap-validator/.
You don't see the form at first (display: none). When you get to the step where you fill out the form, the Submit button is enabled, although the form is not valid.
However, if I display the form right away, the Submit button is disabled until the form is valid, as I want it to be. Does anyone have idea why is this happening and how to get it to work?
<div id="step0">
Some code here that is visible in the first step
<div class="row">
<button type="button" class="btn btn-primary" onclick="step1();">Go to step 1</button>
</div>
</div>
<div id="step1" style="display: none;">
<form id="forma-klijenta" data-toggle="validator" method="post" action="test.php">
<div class="row">
<div class="col-md-8 col-sm-12 form-right">
<h3> Lični podaci </h3>
<div class="row">
<div class="col-xs-12 form-group col-sm-6">
<input autocomplete="off" class="form-control" id="ime" data-minlength="2" name="ime" placeholder="Ime" required type="text" value=""
pattern="^[A-ZŠĐČĆŽa-zšđčćž]([-' ]?[A-ZŠĐČĆŽa-zšđčćž])+$"data-error="Ime je obavezno. Dozvoljeni specijalni karakteri su - i '." />
<div class="help-block with-errors"></div>
</div>
</div>
</div>
</div>
<div class="row form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
<!-- Kraj forme za unos podataka -->
</div>
This is how I worked around this:
Removed style="display: none;"
Added jQuery
$(document).ready(function(){
$("#step1").hide();
});
I have a problem with JSF form validation in bootstrap modal. This is code of it:
<div id="loginmodal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h1 class="text-center">Logowanie</h1>
</div>
<div class="modal-body">
<h:form id="loginForm" class="form col-md-12 center-block">
<div class="form-group">
<h:inputText id="login" class="form-control input-lg" a:placeholder="Login" value="#{loginHelper.login}" required="true" requiredMessage="Pole "login" jest wymagane.">
<f:ajax event="blur" render="loginMessage"/>
</h:inputText>
<h:message id="loginMessage" for="login" style="color: red;"/>
</div>
<div class="form-group">
<h:inputSecret id="haslo" class="form-control input-lg" a:placeholder="Hasło" value="#{loginHelper.haslo}" required="true" requiredMessage="Pole "hasło" jest wymagane.">
<f:ajax event="blur" render="hasloMessage"/>
</h:inputSecret>
<h:message id="hasloMessage" for="haslo" style="color: red;"/>
</div>
<div class="form-group">
<p:commandButton class="btn btn-primary btn-lg btn-block" type="submit" value="Zaloguj" action="#{loginHelper.validate}" id="zaloguj"/>
<h:message for="zaloguj" style="color: red;"/>
<span class="pull-right">Zarejestruj się</span>
</div>
</h:form>
</div>
<div class="modal-footer">
<div class="col-md-12">
<button class="btn" data-dismiss="modal" aria-hidden="true">Anuluj</button>
</div>
</div>
</div>
</div>
</div>
If I use PrimeFaces p:commandButton, the dialog doesn't close when validation fails, but no message is displayed. On the other hand, if I use normal h:commandButton, the dialog always closes and the whole page is refreshed. After page reload, messages about validation problems are displayed in dialog, but I need to click button to display dialog again.
What I'm tryind to say, is that I need a simple way to prevent dialog from closing when validation error occurs, but also dynamically show validation errors in it. How can I achieve it?
The problem main cause is the reload after submit so you can over come this using f:ajax since it will not reload the page:
<h:commandButton value="Submit" >
<f:ajax render=":formId" listener="#{registerAction.register}"/>
</h:commandButton>
And whenever you want to auto-close the modal due to successful validated submit render a panelGroup on that panelGroup do a js code that closes the modal like following :
<h:panelGroup rendered=#{registerAction.submitSuccess}">
<script>
$(document).ready(function () {
$('#registerModal').modal('hide');
});
</script>
</h:panelGroup>
// registerAction.submitSuccess is a boolean flag express valid registeration.
I've searched and can't find a problem similar to mine, where it's partially responsive. I have a footer with 3 buttons and a search box. I'd like for them to be aligned and spaced evenly apart, which I've got figured out. When I reduce the screen size, the buttons are responsive and stack correctly. But the search box is aligning to the left instead of centering with the buttons. Can anyone help? I had to define a width for the search box in order to keep it cosmetically similar to the buttons. I think maybe that's the problem? Please help! Here's my fiddle: http://jsfiddle.net/kEtr9/.
<footer>
<div class="container">
<div class="row navbar-inverse navbar-justified navbar-fixed-bottom row-fluid">
<!-- replaced this with above: <div class="row"> -->
<div class="col-sm-12 text-center"><!-- centers buttons when screen -->
<ul class="nav navbar-nav">
<li><button type="button" class="btn btn-sm fixed_button"><i class="icon-bolt"></i> submit bugs</button></li>
<li><button type="button" class="btn btn-sm fixed_button"><i class="icon-bolt"></i>Feature Requests</button></li>
<li><button type="button" class="btn btn-sm fixed_button"><i class="icon-bolt"></i>Contact</button></li>
<li>
<form class="navbar-form" role="search">
<div class="form-group">
<input type="text" style="width: 160px" class="form-control input-sm search-query" placeholder="Search">
<button type="submit" class="btn btn-xs" tabindex="-1">Go!</button>
</div>
</form>
</li>
</ul>
</div>
</div>
</div>
</footer>
This worked for me :-)
<input type="text" style="width: 160px; margin: 0 auto; margin-bottom: 10px;" class="form-control input-sm search-query" placeholder="Search">