I having html form with angular-js and there is need to remove focus on required fields which are failed on submission.
Actually I am showing all error messages in Pop-Up box. So there is no need to focus on failed controls.
Please help me for it.
This depends on way you are starting you validation.
Assume you are doing this by clicking on some btn.
If so, you should create directive which will subscribe to the click event
and do focus to the document or other element you choose for this.
Don't forget to unsubscribe your listner from the element on $destroy event with .off()
If you are using another way for starting validation you should subscribe to it and do the same.
Hope this was helpful.
Previously I was using type="submit" for input #time of submitting form and Now by using type="button", resolved this issue.
Related
Angular has ng-focus to attach to a form-field to tell if it has focus.
But as I understand I cannot use ng-focus on the <form> itself. What would be the simplest way to tell if any field in a form has focus but without attaching ng-focus on each and every field? Say I have a large form with many fields, and I do want check each field...
I am new to angularjs.
It seems out of the box angularjs shows validation feedback in bubbles in realtime.
I've managed to find a way to show the errors on defocus.
Is there a way, however, to only present the feedback on a div at the top of my form instead of in bubbles?
The bubbles you see are HTML5 standard bubbles.
To valid entirely your form yourself, you'll have add a novalidate property on your form and handle the form validation through an ng-submit form custom function.
More info : http://docs.angularjs.org/api/ng/directive/ngSubmit
and http://docs.angularjs.org/guide/forms for custom form validation
I have an input box and Its bound with datepicker. In my view, there is small calendar icon besides this input box. I want to trigger click event of an input box when user clicks on this calendar icon. I have done this using directive which I have applied to calendar icon. But its almost like jQuery. So is there any different way to achieve this? If my approach is wrong then please guide me to the right direction. I am new to angular and I have read some articles where I read that avoid use of jQuery. Thanks
My Directive
myApp.directive('openCal',function($compile,$filter) {
return {
link:function(scope,element,attrs) {
element.bind("click",function() {
element.siblings("input").trigger("click");
});
}
};
});
Its working fine. But I am not sure that is it right approach or not??
No, if I understand what you are trying to do you are over-complicating things a bit.
In your case it looks like you would have something like:
<img open-cal/>
<input ng-click="doSomething()">
Where click on the img triggers a click on the input, via the openCal directive. Instead considering doing something like this:
<div ng-click="doSomething()">
<img>
<input>
</div>
If doSomething() needs to get data from the input, use ng-model to bind data from your input to your scope.
ALTHOUGH!
If you ever need to do a directive, that is the right way to do it. Using element.bind is not a problem since that is included in Angular. What you want to avoid is using stuff like $('.calendar').click and such.
Another way to approach this would be to add a <label> element for your input field that contains the calendar. Then clicking the calendar would focus the input field. Then all you'd have to do is listen for the focus event on your input field to do your extra work. This has the added bonus of working if someone navigates to your input field via the keyboard by hitting the tab key.
I have a form designed with the GUI designer with input textfields and buttons. I have attached actions to the buttons. When I call up the form with showForm(Form,null), the textfields are not accepting input and the buttons are not triggering the action. This is happening only for this form. Initially, there was the problem solved here Unable to call a specific form from a button in codenameone and then the problem solved here Simulator keeps defaulting to old Main form. What could be the issue now?
As far as I know there may be some issues as you say, but first need to see code
In the form after you added the text fields did you select the text field component and press action event?
Assuming you did that you should get a callback method in the Statemachine class.
This call will be invoked only when the user changes the content of the text field. You can run in the debugger and set breakpoints/step into code to see what is going on.
I have one form with some fields with submit and reset button. I am using cakephp model validation to validate empty and special characters.
If I enter invalid data and submit the form, its displaying error message.After that I click on reset button,its not reset the form. Before validation error message its working fine.
My reset button code is
<input type="reset" class="uiBtn" value="Reset" name="reset"> <input type="submit" class="uiBtn" value="Save Section" name="">
Also I used jquery reset function, its also not working..
Please any one help me what is the problem???
It doesn't work because HTML Reset buttons reset the controls in a form back
to the value they were when the page first loaded. When you post back, the
PHP engine sets the values of the controls again, so the Reset would do
nothing more than change the controls back to what they were when you loaded
the page after the postback.
The only solution to this is to either do it client-side with javascript or
server-side on a postback. Just iterate through all of your controls and set
their properties appropriately.
Following Js Code would certainly work, assuming you don't have another onload event already set.
window.onload = function () {
for(var f in document.getElementsByTagName("form"))
f.reset();
}
This post might help you to reset the form after submit.