I'm designing an app using Ionic Framework / Angular / Cordova and have issues clearing old form values.
When a user logs in, he's routed to another view but when they switch back to the login view (after disconnecting), the login & password fields are still filled with old values.
So I know this question was asked many times here and the main solution is to set input attribute:
autocomplete="off"
But this has no effect.
I also added
document.getElementById('password').value = '';
in the login controller with no change.
How can I clear this values?
use autocomplete in js and put this line:
someFormElm.setAttribute( "autocomplete", "off" );
EX:
<input type="text" name="fieldName" id="fieldId" class="firstCSSClass otherCSSClass autocompleteOff" />
JS:
$(document).ready(function(){$("input").attr("autocomplete","off");});
Related
I have a large form and I would like when the user clicks a "new" button for the focus to be placed in a specific input field. There's a grid on the form and every field has a known id. Note it might not be the first field so not easy to use the tab.
Would appreciate some advice if this is possible. Would save having to manually have the user move the cursor over and click in the input field.
Update: Changed "move cursor" to "change focus"
Here is one solution -
Angular js gives you an advantage of using some of the extra features so that you dont have to use the jquery.
Here is one way to implement the autofocus feature.
<div class="button" input-focus>{{element.idORname}}</div>
and the directive to be defined here.
.directive("inputfocus",function($timeout){
return {
link : function(element,attributes){
element.bind('click',function($timeout){
$timeout(function(){
element/*.parent() or.child()*/.find('type of the field you want to select')[0].focus();
);
);
);
Here you can use the javascript or jquery methods for the dom traversal if there are nested fields in your code.
$timeout is necessary to call for the focus after the browser renders when user has finished clicking the event
As you can see the find('')[0] is a replacement for find('').focus as the latter requires jquery to be used.
Place "autofocus" attribute on the element that you want to focus.
Example:
Name: <input type="text" name="name" autofocus />
If all the input ids are known, just use that.
$("#NewButton").on('click', function(){
//Other code.
$("#IdOfInputToBeFocused").focus();
});
Custom data attribute can be used with jQuery like this
<input data-field="special" />
And then that specific field can be called like this
jQuery('input').find("[data-field='special']").focus();
I am working on an angular application where we are using this [Angular-Auto-Validate] plug for form validations. This plug-in works automattically with all type of form validation which is quiet easy to use but we are facing an issue with this.
We want to stop validate to bootstrap style validations. It keeps us giving this error message.
Angular-auto-validate: invalid bs3 form structure elements must be wrapped by a form-group class
as per the plug-in documentation we added this few configurations but seems like we are doing something wrong.
validator.setValidElementStyling(false);
validator.setInvalidElementStyling(false);
This will be resolved if you place all your form inputs inside a form-group class. here is example.
<div class="form-group">
<input type="text"........../>
</div>
I added field validation attributes like "required" and "pattern" in my form, and the form is inside a ng-controller. The validation works. But it seems the validations are triggered on page load, and I see all the fields are marked as invalid with error message when the page load.
I tried to add "novalidation" attribute to the form as indicated in the examples on AngularJS website, but no luck.
I would like to have the validation triggered the first time the user tries to interact with it. How can I do that?
Update
Here's an example https://jsfiddle.net/davidshen84/00t197gx/
<div class="mdl-cell mdl-cell-6-col mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="screenname" pattern="[a-zA-Z0-9]{3,}" ng-model="comment.screenname" required/>
<label class="mdl-textfield__label" for="screenname">Screen Name</label>
</div>
On load, you should see all the input fields had a red line under them which indicate they are in the invalid state. And the line turns to blue once validated.
Note: The style on the check button does not work...should not be a concern in the problem.
Angular is going to check the form the same way at any point (load or later) and render the result. If you don't want to display the results on load, add logic to check whether the form has been interacted with. You can hide your error messages using ng-if="yourFormName.$dirty", or display according to the status of an individual field with yourFormName.yourFieldName.$dirty.
Click here for live demo.
What is currently implemented (wrong IMHO) is that MDL automatically validates input and doesn't mind "novalidate" form attribute. I had to implement check for empty input value (skip validation and remove is-invalid class) and, since angular form validation requires "novalidate" attribute, check:
if (input.form.novalidate = true) // skip validation
that way you can actually turn off mdl validation and leave everything to angular.
One more thing is actually required. You can create angular directive which validates expression and add is-invalid class if necessary:
div class="mdl-textfield" mdl-validator="form.email.$error"
This is a bit complicated, but I've now verified it with both Angular Scenario tester and Protractor, and in the user interface.
Set up Twitter Bootstrap 3.x (I'm using the latest but had 3.0.3 before) - from the bower boostrap install
Set up Angular UI with the built-in templates (I'm using the angular-ui-bootstrap-bower library from Bower)
Set up a datepicker-popup field in Angular-UI like this:
<label for='due_date'>Due Date</label>
<input id='due_date'
class='form-control'
type='text'
datepicker-options="dateOptions"
datepicker-popup='yyyy-MM-dd'
ng-model="task.dueDate">
Add a button and a controller method to inspect the variable.
Testing:
Click on the date field, and type in a date: 2013-01-05
Hit escape or click on another field to close the popup dialog (i.e. don't click Done)
Submit the form
You'll find the date to be one day behind.
Interestingly, if you click on an actual date in the date picker, it will be correct. Including 'today'. If I remove the ui datepicker, it works fine with persisting the typed-in data. My date format is YYYY-MM-DD when I type it in.
This is maddening, as I've thought it was a bug in Angular Scenario, but once I figured out that Protractor ALSO fails, and that I could reproduce it by canceling the dialog, and even typing and submitting, I am beginning to think it has something to do with localization and timezones.
Anyone else run into this?
Here is a protractor test that fails:
it('should return one task', function () {
thePage.clearTasksButton.click();
thePage.newTaskButton.click();
thePage.taskDescription.clear();
thePage.taskDescription.sendKeys('A new task');
thePage.taskPriority.clear();
thePage.taskPriority.sendKeys('1');
thePage.dueDate.clear();
// pick today and dismiss the Angular DatePicker
thePage.todayButton.click();
thePage.createTaskButton.click();
var task = element.all(by.repeater('task in tasks').row(0).column('dueDate'));
task.then(function(elems) {
// should result in one row
expect(elems.length).toEqual(1); // this works
expect(elems[0].getText()).toEqual('2014-03-19'); // this is 2014-03-18
});
...
Thanks
Ken
Extjs prefers your app to be a single page app, but I'd still like to be able to do things like refresh my page and keep my current location in the app, and enter a url to get directly to a particular point in the app. Is there a solution for this?
Yes, I do the same in my app. You can use the Ext JS history mechanism to do so. Have a look at this example from Sencha.
You can listen to the history change event like this
Ext.History.on('change', function(token) {
// you navigate-to-target code goes here, e.g. change the viewport content
}
You can then initiate navigation by setting the browser hash to some navigation target
document.location.hash = yourNavigationToken;
This gives you also the ability to use deep-linking and forward/backward navigation with the browser buttons.
You need to init the history:
// The only requirement for this to work is that you must have a hidden field and
// an iframe available in the page with ids corresponding to Ext.History.fieldId
// and Ext.History.iframeId. See history.html for an example.
Ext.History.init();
and add an iframe and a hidden input field to your page, like in the example:
<form id="history-form" class="x-hide-display">
<input type="hidden" id="x-history-field" />
<iframe id="x-history-frame"></iframe>
</form>