Ext JS Search button which is attached to form - javascript

So basically I wanted to make a thing like this. A search button which is disabled. than when somebody enters something in one of the fields of the form I want button to enable itself and if somebody cleans every input up than I want to disable that button back. So my Idea was something like this. Extend the button provided by Ext JS. and somehow when this button is drawn or initialized, attach event of value changed to its upper form's input fields. so basically when somebody changes value of any input, that method attached as a listener will be called and than with help of some logic I can achieve the thing I want. but there is one problem. I don't really see how to do that. I mean I have some guesses but all of them have led me to the dead-end. So can you suggest what can I look at or from where to start ?

You can use formBind to enable/disable button depending on the validity state of the form. Validity of the form fields are checked against the validators set for form fields (like allowBlank: false). See the Example usage here
Another way to validate is to use VTypes
But, for the specific requirement to enable button if user enter values in any one of the fields, you might require custom validators. Sample fiddle here: https://fiddle.sencha.com/#fiddle/5qe

Related

Angular Fomrly and Modals - unable to update validation of form after modal input

I have created a modal that works in moving the model from the modal to the form, however if the field has required: true, the form will not validate if the field is touched but then checked in the modal.
I have a working JSBin showing the issue.
As you can see from the example, I have tried various things to force the field to valid without any luck.
Any help would be appreciated.
No idea why you are moving the model to a modal and then back, it seems to serve little purpose. I have found cases when validation doesn't always work right, this seems to be one of them. You have two options. Use an expression property to check a separate flag you set when you select the field to change required to false or simply set a flag and use that to check validation manually.

Evaluate validity of fields based on action being performed in Angular

I have a complex Angular form representing a printable document. Form has two buttons to submit the form. One is for saving the working version and another to print the completed form to PDF.
The problem is simple, but more difficult to solve for me. Of course, when you are going to save a working version there will be unfilled fields. There are some allways required fields (such as name and personal ID) which are needed to save the form. Other fields are required only for printing. So the validity of these fields depends on the action (the button clicked by the user). I cannot determine the validity when the user is editing the field (angular validators are fired when fields content is changing), because I dont know which button will be clicked. I need to fire the validation of the whole form after one of the buttons was clicked. At that point I already know the action and can evaluate the validity of the fields (I have a custom angular validator to do this job).
My question is: how to trigger the (re)validation of the whole form from a function? If it is not possible, are there any other solutions to implement the validation described above?
I would prefer a solution where the $valid and $invalid properties of the fields are always set properly. My custom validator can ensure this. But how to trigger it on every field from a function? If it is not possible to trigger the validation by one function call, it is possible to iterate over all fields of the form? (to call the $validate() method of NgModelController)

jQuery - Check if input field is untouched

I'm trying to do something with jQuery or just JavaScript (either way works). I need to check if a certain form input field is untouched AND has a value.
Essentially what's going on is that, from a previous page, a user fills out a small form... they are redirected to the full version of the form with said information pre-filled. To reduce hassle, I would like to make it so that as the user fills out the form, it skips the pre-filled input fields. I need to do this in a non-blocking away, so if a user actually clicks on a pre-filled input field to change the value, it won't just skip again.
Is this even possible?
Edit: In this context, when I say "skip", I mean as in to move onto the next form field in the form, if there is any left.
I don't know what you mean by "skip". But you can add an event listener for the change event of the inputs and then set a class/data-attribute or store the information as a js property, so you can test for this value and treat inputs differently if they have been touched.

How do I determine whether data on a form has been input by the user or the browser?

I have a checkout form that will display a pop-up survey to ask why they haven't started filling out the form after 5 seconds. However, I need to be able to check whether the user has actually entered data as opposed to data entered by the browser's auto-fill feature (any pre-populated data set in the markup I specifically ignore in the javascript or jQuery).
Right now my solution is to have the setTimeout run a function which checks a variable (true or false) that is set to false on a jQuery .focus or .change event on the input types (input, select, textarea). However, since the javascript may load after the user is able to use the form elements, I have to check whether the user has entered data before the survey pops up.
Is it possible to differentiate between user-inputted data and browser-inputted data if the javascript loads after the user has done anything to the form fields?
If you really want to tell browser not to autofill it at all, you could use autocomplete attribute, but this is unfortunately an invalid attribute and thus will not validate. If you really need your HTML to validate, you can use jQuery to do just that for you:
$(your_form_selector).attr('autocomplete', 'off');
More discussion about autocomplete here
What about .keyup event for form?
var isFilledByUser = false;
$("#input").keyup(function(){
var isFilledByUser = true;
});
ok... this was mildly entertaining, but I definitely agree... this feature would be so annoying XD
http://jsfiddle.net/NTvrN/1/
but there you go... now type, foo!

javascript editing fields after manual edit of field

I've looked everywhere on this.
basically what I have is a script that changes the value of some fields based on a radio selection.
For example: Think of it like a radio button that gets credit card data.
it works initially when the page loads and selects a radio. It will correctly load the data of that radio button.
Now when I choose to edit the fields manually, using it like a "new card" form, if I change my mind and go to select a presaved card, it will no longer update those fields I edited manually. It will completely ignore my request for it to change values via my javascript code that was just previously working. Note: It will actually still continue to work for any fields I left alone *did not manually type into/edit
so I was just wondering who else had that problem and what one does to fix it.
I am not sure if I understand exactly but I'll take a shot. My suggestion would be set apply a css class like "is-dirty" to the field once it has been updated and then you check to see if a given field has that class before updating it.

Categories

Resources