I am using fantastic gem "parsley-rails", it works just perfect for my application.
But now I am facing problem of removing those error messages, because they change form layout.
My html looks like this :
<input data-parsley-minlength="3" data-show-errors="false" id="message_name" name="message[name]" placeholder="Kā Jūs sauc ?*" required="required" type="text" data-parsley-id="9402" class="parsley-error"><ul class="parsley-errors-list filled" id="parsley-id-9402"><li class="parsley-required">This value is required.</li></ul>
My css:
li.parsley-required {
display:none !important;
}
ul.parsley-errors-list {
display:none !important;
}
ul.parsley-error-list li {
display:none !important;
}
This code hide all error messages on first validate click. But If I change input value error message is shown again.
I tried to look some Google results, but no valid resources.
Any tip on this ? Thanks in advance..
It's not clear what you're trying to do.
Errors should get removed automatically by parsley.
If you're doing something funky, call $form.parsley().validate() on your form, or call $field.parsley().reset() on .
Related
I am trying to make a mat-card navigable from the keyboard. Right now, when pressing tab the element is focused however the redirect event (should be the same as the click event) isn't triggered when pressing enter.
I've tried keydown.enter and onKeyDown (from a11y package) but no success so far.
HTML
<mat-card role="group" (click)="addQueryParam(group.name)" (keydown.enter)="addQueryParam(group.name)" class="mat-elevation-z0"
[ngClass]="'background-'+index" (mouseout)="mouseOver=false"
(mouseover)="mouseOver=true" style="padding: none; margin: 5px">
Typescript
addQueryParam(groupName) {
this.router.navigate(['/data'], { queryParams: { ['groups.title']: groupName }, queryParamsHandling: 'merge' });
}
Any idea how to solve this issue?
TIA,
Isabela
I suggest you two things:
try using (keyup.enter)=.... I used it a couple of times and it worked well
If that doesn't work try using (keyup) or (keydown) and in your function check if the key code is 13 (enter key code), something like this:
HTML
<mat-card role="group" (click)="addQueryParam(group.name)" (keydown)="addQueryParam($event, group.name)" class="mat-elevation-z0"
[ngClass]="'background-'+index" (mouseout)="mouseOver=false"
(mouseover)="mouseOver=true" style="padding: none; margin: 5px">
Typescript:
addQueryParam($event, groupName) {
if($event.keyCode === 13){
this.router.navigate(['/data'], { queryParams: ...);
}
}
If i remember correctly you can check the type of the event in a field like event.type, or something like that.
Additionally check this discussion out, because theese functions are not well documented, and here you can find som infos :
What are the options for (keyup) in Angular2?
EDIT
I also found this very useful article: https://medium.com/claritydesignsystem/angular-pseudo-events-d4e7f89247ee
the suggestion dropdown disappears when user clicks the input then press esc key.
then a weird progress bar keeps cycling..
I need to disable this function
First, you should add an id or a class in your md-autocomplele. Then, try this:
#id md-progress-linear .md-container
{
display: none;
}
or
.class md-progress-linear .md-container
{
display: none;
}
Hope this help.
I deal with this error one entire day, but the solution is simple: update your angular-material library.
More information? Version 1.1 work fine. If you look the solution is here: https://github.com/angular/material/commit/e821ae327f4ed193d14450aa0c83cd457092f563 (line 446 of autocompleteController.js)
There is a page in our app that has a single input field. When going to that state on IOS, the keyboard automatically pops up. This is not what is desired. This doesn't happen on the Android version.
I've tried all sorts of things, but nothing is sorting it. My last attempt was to call $cordovaKeyboard.close() in the app.js run block within a $stateChangeSuccess handler. Alas, nothing.
Any pointers would be greatly appreciated!
There's not much to put in code terms. The offending input:
<ion-item class="item-input-inset">
<label class="item-input-wrapper bg-light-grey-30 text-center">
<input type="text" class="text-center tracker" ng-model="values.exploreSearch" placeholder="Enter city, street, username or keyword"/>
</label>
</ion-item>
And the JS in the $ionicPlatform.ready block in the main app.js run block:
$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams, error) {
if (window.cordova && $cordovaKeyboard.isVisible) {
$cordovaKeyboard.close();
}
});
I previously tried putting a block in the page controller that looked like this:
$ionicPlatform.ready(function () {
if (window.cordova && $cordovaKeyboard.isVisible) {
$cordovaKeyboard.close();
}
}]);
This last block, according to my client (as I don't have an IOS device to test on), worked the first time the page loaded, but not subsequently. If you left the page, and came back, the keyboard would pop up.
I had the same issue, and it seems to have something to do with the way the iOS browser sends click events (more here: http://blog.ionic.io/hybrid-apps-and-the-curse-of-the-300ms-delay/)
The way I worked this out was to hide my form on $stateChangeStart and then show the form 400ms later. An slightly better way is to have a transparent div covering everything, that you hide 400ms after $ionicView.enter.
<div style="position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: 1000;" ng-hide="showFields" class="ng-hide"></div>
In my project,jquery-ui-1.10.3.custom.min.js is used to create UIdatePicker. In HTML page , UIDatePicker is defined as below :
<input id='input_birthdate' class='inputText input big,ui-datepicker-title-custom' type="text" maxlength="64" tabindex="7" style ="position: relative; z-index: 1000;" />
If I inspect this particuler field in HTML page in Firefox browser , I can see the IDs and Classes declared in jquery-ui-1.10.3.custom.min.js are being used.(I don't know how jquery-ui-1.10.3.custom.min.js is used on input_birthdate).
If I am declaring as below in some JavaScript page , it works both in laptop browser and ipad but Its not allowing to select any year or month as div is getting closed.
$("#input_birthdate").focusout(function() {
$("#input_birthdate").datepicker("hide");
});
I noticed that datepicker is made of several components,so I thought of applying focusout on parent div as below:
$('#ui-datepicker-div').focusout(function(){
$('#ui-datepicker-div').datepicker("hide");
});
But now its not working on IPAD.
Kindly suggest where I am going wrong or any other alternative to fix this.
Please check the following function should work on iPad
$("#input_birthdate").blur(function()
{
$("#input_birthdate").datepicker("hide");
});
ASP.Net MVC 3 RC, Razor
Experiencing some unexpected behavior when I try to use a custom message and using client side validation. The problem is it always displays the custom message even though there is no error.
So say I have a Client Model where the FirstName is set as Required. If I have the following code the validation message is not displayed until I click on Submit which works as expected.
#Html.EditorFor(model => model.Client.FirstName) #Html.ValidationMessageFor(model => model.Client.FirstName)
But now say I want to customize the validation message to use an asterisk like so:
#Html.EditorFor(model => model.Client.FirstName) #Html.ValidationMessageFor(model => model.Client.FirstName, "*")
Now even before I click on the submit button, there is always an asterisk next to the field.
The expected behavior is that it would show the asterisk when there is a validation error.
Thanks for any help.
I found the problem, the following CSS is needed:
.field-validation-valid
{
display: none;
}
.validation-summary-valid
{
display: none;
}
Somewhere along my refactoring those classes got taken out. They are in there by default when you start a new MVC 3 project. Hope that helps someone in the future!
The chosen answer didn't work for me. I had to use the following. Note the class is "error", not "valid". This hides the validation message being shown on page load.
<style>
.field-validation-error
{
display: none;
}
.validation-summary-valid
{
display: none;
}
</style>