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.
Related
I have two radio buttons (Yes/No) and am trying to force it to 'No' when a certain select box selection is made. Here's what I have for the script (below), but it totally disables the radio buttons and doesn't post the data to our db. How can I...
Force the radio button selection to No?
Disable the ability to change the radio button from No to Yes?
Still post the data to our db?
$(function() {
$('#presence').change(function() {
var value = $(this).val()
var invitation = value === 'common' || value === 'frequent'
$('.radioyesno input').prop('disabled', invitation)
if (invitation) {
$('.radioyesno input:last').prop('checked', true)
}
}).change()
})
Your code seems like it has three problems:
You use $('.radioyn input') and $('.radioyesno input:last'). Is it .radioyn or .radioyesno?
You're calling }).change() for no reason. That call does absolutely nothing. .change() is used to bind an listener to when something changes.
You are not actually posting the update. To post it, you will need to call .submit() on the form, or .click() on the submit button.
Once you fix the above 3 issues, you should achieve your expected behaviour. If anything is not working, I suggest using console.log and breaking your code into smaller areas to test and make sure each line of code does what you expect it to do.
I have a form in which have one autocomplete text field and submit button. on Autocomplete text I have below code which uses change event which basically empty out the text field if value is not part of the list, and on button- onSubmit i check if field is null or not, if its null then it displays error saying it can not be null. All these work fine if I type in text and click somewhere else except submit button and then click on button. for eg. if I type xyzxyx (which is not part of select list) on textbox and I click on submit button then it accepts whatever value is typed and takes it to next screen. It seems like on OnSbumit event is firing first before onChange of Autocomplete field, how do i resolve this?
$(#testBox).autocomplete(
{
soruce: url,
change:function(event,ui){
if(ui.item=null)
{
$(#testBox).val('');
alert("entered item is not part of the list");
}
}
In your if you have to use a double "=":
if(ui.item==null)
Check Below Jquery Tutorial :
https://forum.jquery.com/topic/jquery-validation-on-jquery-autocomplete
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
I have a form which I submit manually (using JS) and it makes the querystring direct since it appends it with all the controls id (weather they have value or not) I read somewhere that I can avoid this by disabling the controls that have no values, before submitting the form.
Hence, In my form I have text box, checkbox and select (dropdowns), I am trying to write an inline query which will get all the select which have no option/values selected from its list :
This $('form').find('select option:selected[value!=""]') somewhat works but this $('form').find('select option:selected[value=""]') doesn't at all.
Any help would be appreciated.
This is straightforward to do on form submission, by inspecting each element in the form. Make sure that you provide a way for users to actually re-enable the disabled form elements.
A working code would be:
$("#testForm").on("submit", function() {
$(this).find('select option:selected[value=""]').parent().attr("disabled", "disabled");
alert("ok"); // for debug purposes
return false; // this stops the form from actually being submitted
});
Here's a working fiddle that demonstrates widget disabling:
http://jsfiddle.net/sw6v928m/3/
Edit: Updated to actually select disabled elements
Edit 2: Updated to compact the code a bit, after request from the OP
I have a form that I validate with jQuery Validate. I want to be able to disable the submit button when the form is invalid but I am unsure of the best approach. To disable the button I can simply do this
$("#clientConfigurationForm input[type=submit]")
.prop("disabled", !clientConfigValidation.valid());
The issue is where do I put this code? It seems that the only way to track all changes is to replicate the code in both unhighlight and highlight.
Is there a better way to approach this issue?
I'd execute it when an input is changed.
$('#yourForm input, #yourForm select, #yourForm textarea').on('change', checkForm);
function checkForm(){
$("#clientConfigurationForm input[type=submit]")
.prop("disabled", !clientConfigValidation.valid());
}
Quote OP's Comment:
"This doesnt entirely work, because if I enable and disable a checkbox then the form inputs disable and then become enabled again, at this point clientConfigValidation.valid() says true but, on submit, it realises its not actually valid... Very odd"
This is caused by a timing issue regarding when the value of the checkbox actually changes.
To fix it change your change event into a click event to more immediately capture your checkbox and radio buttons. This does not seem to alter how the rest of the input elements behave, because you have to click on them when you change them.
$('input, select, textarea').on('click', checkForm);
function checkForm(){
$("input[type=submit]")
.prop("disabled", !($('#clientConfigurationForm').valid()));
}
Working DEMO: http://jsfiddle.net/8umJ6/
If you notice any issues with one input type over another, you could tweak the code by specifying different events for different input types.
$('input[type="checkbox"], input[type="radio"]').on('click', checkForm);
$('input[type="text"], select, textarea').on('change', checkForm);
function checkForm(){
$('input[type="submit"]')
.prop("disabled", !($('#clientConfigurationForm').valid()));
}