I have a form field as Results, where I have used Template Driven Angular Form. I am able to validate a form with dropdown, input, radio, checkbox, and other input fields. But have buttons as Pass, Fail, and Not Applicable for different rules. How to apply the required field on buttons. Is there any way to achieve this? Attaching a screenshot for good understanding. Or Should I use a radio button group and style them as buttons.
This can be achieved by using ngClass or ngStyle on condition basis. Here you can bind these buttons with disabled attribute and apply styles accordingly.
For example, some of them which are pass. It should be highlighted and rest should be made disabled. This is manageable.
Other option is as you said using radio buttons and make them look like buttons, it will make it much easier as you will be able use value change in case of radio button.
Related
I want a form to toggle the visibility of an input field based on selecting a checkbox. This is easily achieved using the ng-show directive. However if the user un-checks the checkbox i would like the input field to hide and have its value(s) cleared. I want to do this without resorting to creating a controller for this.
Can i do this with a directive?
I am using Parsley.js for validating a form submission for one of my projects.
I have two panels with single submit button in each panel. When the submit button is clicked, I require to validate only that panel element not other panel elements. For that I used the attached code which is in this jsfiddle.
Please see this answer: Validate set of fields only if radio button is checked (conditional validation) which details the usage of data-parsley-group.
In short it won't work. This is because Parsley requires all data-parsley-group fields to be validated before the form $.submit event is triggered.
You have two options to accomplish what you are trying:
Create two separate forms. Each one has its fields and its submit button. Simpler and better way.
You would have to do something like this: ParlseyJS - remove validation from disabled fields. That is, when the user clicks the submit button, you will have to set the fields of the other panel as disabled, destroy parsley and apply parsley.
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
Here is my problem, I'm using jQuery validate to validate a form.
Problem is,I have special styling for my select boxes, I use the bootstrap select.
Now, this basicly re-generates an UL with a LI dropdown.
Is there a way with jquery validator too make sure one of these are selected, and to refuse the form if the first one is selected.
Anyone have any experience with what I wish to do ?
Thanks in advance !
Bootstrap select seems to be using the UL/LI combination to display something nice to the user but is still changing the value of the hidden select box for when it is posted.
What you will need to do is to modify the ignore handler in jQuery Validate, this is set to ignore all hidden fields by default.
I have had to deal with the same problem and written a custom invalid handler that allows you to write exceptions for fields hidden for this reason.
Check out the Validation Docs and find the bit about ignore handlers.
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.