I am using jQuery validation for my application.I have a form that having 2 select boxes.The second select box is disabled according to the first select box value. Also these boxes are coming under an add more functionality. So the form may have multiple such boxes. Thus I am added the validation rules using addClassRules. example code is below.
$.validator.addClassRules("classname", { required: true});
The validation working fine. I want to remove the validation for second dropdown when the first dropdown having a specific value. Currently I have the following issue
once the validation works
change the dropdown value
second box disabled.
click on the second dropdown and then click on out side the error message displayed for second dropdwon.
Form will submit when click on submit button.
I have tried with $('form').validate({ignore:":disabled"}); inside first dropdown's onchange function. but it is not working.
I hope will get a solution for this problem.
Thanks in advance
Related
As you can see on this link there is a bootstrap select box option which allows you to do live search for select box and find the option which you want.
The thing which i want and i don't have is searching on this table automatically with jQuery or JavaScript code.
If you didn't understand what i meant yet, there is an example :
$(".selectpicker").selectpicker('val', "test").selectpicker('refresh');
As you can see this code , this code will change the value of bootstrap select box option and then its will refresh it so select box value will change and the option on it which has value="test" will become selected and the bootstrap select will work well and you can deselect the option.
The thing which i want is search something after we refresh the select box with this code .selectpicker('refresh');.
Do you want to know why do i need something like this ? Because i using bootstrap select on my project and the select box has some options like Select All and when a user choose this option this code will be happen :
$(".selectpicker option").attr("disabled",true);
$(".selectpicker").selectpicker('val', "Select All").selectpicker('refresh');
And after this code happens the option of select box will be disabled and its ok but the problem is the select box have to refresh for showing that all of options disabled because all of them selected already and after refresh happens its will clear the search result and the search input will be still stay in the same thing which user searched in before but its not searching it anymore. And the thing which i want will fix this problem i mean i want to make it search the thing which user searched before after refresh.
The code which i looking for is something like this :
$(".selectpicker").selectpicker('search', "Some words").selectpicker('refresh');
Thanks.
$(document).on("change","#select-picker",function(){
$search_value="blob blob";
$("button[data-id='"+$(this).attr("id")+"']").next().children(".bs-searchbox").children("input[type='search']").val($search_value).trigger('propertychange');
});
// Bootstrap-select v1.13.9
I have an input box and a radio box. When I click on the input box and then click on the radio box, I suppose the control should transfer to the radio box immediately. Instead, the first time, it shows the error message and the second time, it transfers the control to the radio box.
You can find a plunker of the issue here: No transfer of control to the radio box except after the second click
Yes, that's because you're showing the error as a block, this shifting the radio button.
To image that, imagine that the error pops when the mouse button goes down, while the radio box is checked when the mouse button goes up.
It might be a split second, but it's enough for your user to be fooled.
I would recommend either displaying your error in another way / Findign another layout for your form, or just validate the form on submit.
To validate the form on submit, Use the second parameter of the FormBuilder.group call :
this.myForm = fb.group({...}, { updateOn: 'submit' });
Here is an example of a working form, because the error is blurred out instead of removed (hidden vs style.opacity) : https://next.plnkr.co/edit/QEEviTpocGJ7QHus?open=lib%2Fapp.ts&deferRun=1
I tried lot of posts but none seem to work for me.
I have 2 drop downs inside same form element and they should work in toggle manner, with following properties:
selecting any drop down should clear the other one and auto submit the form.
Also on form submit I am retaining the value of selecting drop down to display user what value had been selected.
For auto submit I have used .change and fformid.submit.
But issue is if i selected dropdown 1, form get submitted and page is displayed with dropdown1_value 1 selected and now when i make selection of 2nd drop down, both fdropdown 1 and dropdown 2 value gets submitted.
I tried using dropdown2_id.remove(), .emtpy(). .val("").
All these seem to visually remove elements, but form gets submitted with the value previously selected.
And i dont want to use Ajax, since I am using Django, doing Ajax will return result to js which is difficult for me to render than using html itself.
I'm having trouble finding javascript, HTML and/or CSS code that'll change the form based on the drop down menu. For example, the form is for adding a property and the drop down menu selections are single family, condo, apartment but they each have their own set of text boxes, menus and radio buttons. How can I achieve this?
What I have understand from your query is that , you have a from with some fields and you have a dropdown and you want that when ever your change selection in dropdown the form fields values must change accordingly right ?
If that is the issue , then it is very simple , first catch onSelectionChange event of dropdown and try to get selected value and once you get the selected value fill form fields by accessing them accordingly in a condition.Thanks
So I actually already had a piece of code I was fumbling with (http://jsfiddle.net/CYzsY/) for this question and it looks like its not working for me because its based on jQuery 1.7.1 and I'm linking to 1.10.2 in my code. Will make a new post accordingly. Thanks everyone!
I have a form having select Input with some options in the drop down option list.
Requirement: On click of the select Input I need to check validation of form.If the form is incomplete I need to skip the behaviour of select input i.e do not show the option list.
However if the form is complete the select input should show me the options(i.e normal behaviour).
Problem : I did try event.preventDefault() to skip the further action assuming that the select input will not show me the options if the form was incomplete.
But this aint workin
Find the code:
$('selectInput').addEvent('click', function(event){
if(!validateForm()){
if(event.preventDefault){
event.preventDefault();
} else {
//IE
event.returnValue = false;
}
}
});
You could disable/enable the select everytime the validation parameters are changed ?
Otherwise, I noticed you are using jQuery, so you could imple,ent your own or one that is already made with your features...
My suggestion would be to add the options in your onclick. If the validation passes, add the option otherwise don't do anything.