jQuery Validate plugin with styled radio and checkboxes - javascript

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.

Related

Angular Validation on Button as Fields in Template Driven Form

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.

Ext JS Search button which is attached to form

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

Ignoring Validators

I have a page where I use Javascript and a <input> button to hide the ability to add a new user to my database. To ensure that people enter in accurate info, I have added validators which works great. The issue, is that I also have a GridView and a search facility on this page and because I use Javascript to hide it, no click events will trigger because those textboxes attached to the validators don't have correct data in them. Is there a way to get it to ignore the validation unless the above button has been clicked?
I wrote this and had another crack at Google. My issue was that I could add CausesValidation="False" to the ASP:BUTTON control which worked, but I was using HTML to generate the Add User button instead of ASP.NET. Since I was using JQueryUI, I found it easier to search how to change from <input> to <asp:button> controls which I did by changing the javascript from:
$("#button").click(function () {
to:
$("input[id$='AddButton']").click(function () {
If I understand it correctly, <asp:button> is rendered into HTML as input[id=... etc. Adding in $ meant that that the script applied to any <asp:button> that ended in AddButton. I needed this since I had a few Search buttons on this page hidden in other Views and still wanted a consistent naming structure on the page. The alternative was to use the ^ symbol instead which would apply the script where AddButton is at the start of the ID.
Try setting validation group on that set of fields you want to validate. This should make the validators work only on that set of controls and no other.
Set the validation group on all input controls, validation controls and submit button.

Cannot access the value of the selected item of a disabled drop down, in action class (struts 2)

On a Jsp page I have some select elements which were disabled after a value was selected (Disabled them in javascript). Now when the form is submitted, I can not access those selected values in the action class.
I know for sure that this is caused by the select elements being disabled because, when I tried the same without making them disabled, it worked fine.
Now I don't understand why is this so. I thought maybe I should enable them before the form is submitted, but it does not seem a good idea.
I faced this problem while implementing this : Creating struts 2 forms dynamically on jsp using java script .
(You can find the code there. Although I don't think you will need the code, because it is clear where the problem is.)
Here I am able to access the values of text fields but I can not access the values of select elements.
I asked this question separately because I thought this is a different topic.
Thanks!!
Disabled fields by W3 specifications will not get posted on the server side so this issue is not related to the Struts2 but in generic an HTML way to go
Disabled controls
i am not sure why you want to use disabled control for your form.things can be done using readOnly attribute or use hidden fields
You can set them in hidden field through java script and pass it to action

jQuery validation of controls

I am looking at validation of some text boxes for things like required,
minlength, max length, email etc... I am able to get examples that work fine on submit button on page. I want to do this validation on a button click which will only raise a Ajax request and not submit of page.
On the Internet all the samples found was with a submit button. Is there an
easy way to change this code a little bit to make it work for non submit button click or any
new jQuery or Java plugin to do the same?
I am using the jquery.validation.js for now. This works with submit buttons.
Any kind of help with suggestion or help is appreciated.
The jQuery validator plugin already handles this. Just tweak some of the options in the validate method.
As quoted in the documentation for the onfocusout option:
Validate elements (except checkboxes/radio buttons) on blur. If nothing is entered, all rules are skipped, except when the field was already marked as invalid.
Code Example:
$("#form").validate({
onfocusout: false
});
That's just one of a few dozen options you can configure. You can see the full list of options for the validate method here:
http://docs.jquery.com/Plugins/Validation/validate#options

Categories

Resources