I am using the following function to perform some easy validation on a pure radio group survey form:
$('form').submit(function(e) {
e.preventDefault();
if($('input[type="radio"]:not(:checked)').val()) {
this.reportValidity();
return;
}
this.submit();
});
I started from this fiddle to and slightly modified it.
This works when validating radio buttons very well and as desired... but for some reason the form will no longer submit once every radio group has a selection, unlike the version in the fiddle. I feel like I am missing something pretty simple and will face palm once someone answers this.
Thanks in advance.
In your modified script, you're checking for ANY unchecked radio button, so the check is always exiting -- only one in a group can be checked, so you're bound to have at least one that isn't. It won't flash up a validity check because the group is fine, but it'll still return out of the submit function without getting to the actual submit() call.
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 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 am working on a form that makes use of the HTML5 form validation attribute required for various text and radio button fields. The form also has two sets of checkboxes, of which at least one checkbox must be checked.
In order to keep the user error feedback consistent I am using the setCustomValidity method to throw a native error bubble when the checkboxes are left unchecked. This all works fine, however, there is an issue with error feedback when the form is submitted and the onsubmit event is used to trap unchecked checkboxes. This issue doesn't arise when the onclick event is bound to the submit button instead, but I understand it is preferable to use onsubmit.
Onclick test case (Click submit button and error bubble appears first time!)
http://jsfiddle.net/Jimadine/bZe5e/
Onsubmit test case (Click submit button - error bubble appears after second click)
http://jsfiddle.net/Jimadine/2vLszqac/
Furthermore, from my testing of the onsubmit case, Firefox highlights the unchecked checkboxes after the first click of the submit button; this is indicated by a red glow around the checkboxes. Then after a second click the error bubble displays. In other modern browsers the first click displays no on-screen indication that the checkboxes were left unchecked; I presume this is how the UX side of HTML5 validation was implemented in these browsers and that Firefox chose to do things slightly differently.
My question is why does the onsubmit test case require two clicks and what is an appropriate way to rectify this so it behaves like the onclick test case? I'm guessing it has something to do with the submit event firing after the validation but I'm not sure how to correct my code.
Here is a working jsfiddle base on your first example http://jsfiddle.net/bZe5e/6/.
The key is instead of doing this only on submit/button click. You are checking the validity on change + initially
doValidate();
I came across a similar problem, and for me it worked calling
reportValidity() right after setCustomValidity().
function onSubmit(e){
e.preventDefault();
const myInput = document.getElementById('my-input');
if( inputIsInvalid ){
myInput.setCustomValidity('My custom invalidity message.');
myInput.reportValidity();
}
}
Reference: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Constraint_validation#constraint_validation_process
Firstly, I have the jQuery set up so the form doesn't submit: http://jsfiddle.net/FztLS/1/
Only it doesn't submit if the fields are set. I was wondering if anyone knew what was going wrong in the script.
I assumed that the return false; would only apply if the field was empty.
Also, how do I apply the class to every empty field, not just the first?
Lastly, is there a better way to include the radio box validation?
Update your else clause to:
else {
$('#respond input, #respond textarea').removeClass('form_error');
$('#commentform').submit();
}
Here's the fiddle: http://jsfiddle.net/FztLS/5/
The 'submit' event can only be bound to a form element, you're attempting to bind it to a section.
FYI, $("section#respond") is bad practice. You should never have more than one element with the same id per page, all sorts of things will go wrong. This will suffice: $("#respond").
The problem is here:
if ($('input[name="rating"]:not(:checked)').val()) {
Since these are radio buttons there will always be unchecked ones so you always get a value and therefore return false.
Try this instead:
if($('input[name="rating"]:checked').length === 0) {
Which means "If no radio button is checked".
Thanks to everyone that helped, but I ended up fixing my own problem: http://jsfiddle.net/yBmdx/20/
Turns out that starting from scratch, and setting up an if($validForm) was the best method.
I have input field
<input type="text" name="vehicle_make[]" id="make1"/>
and i have help dropdown that updates this field if user choose to do so. I do it trough standard jquery code
$("#make1").val("value");
Problem is, since i use validate plugin to validate this field, if user click on validate before entering anything in that box, he will get notice that he needs to fill it, but then if he fills it trough dropdown, validate plugin will not detect it until user click on submit again.
I know i could call submit in function in which i process dropdown, but i think that it is not right solution, since i would need to check if validation is already done before doing that (since if it is not, it would start validation before i want it to start).
I also need to tie some other things to that field also, so i would like to know is there is a way in which i could write function so it always check if field is filled, even if user did not fill it directly.
Sorry if i didn't explain everything right, this is my first message here.
Try this
$("#make1").change(function(){
//do something there
});
I have found solution. First, i created js variable form_submitted, and added onclick event to submit button, to change value of variable form_submitted to yes. Then, i created function:
function update_validation(){
if(form_submitted == 'yes'){
$("#my_form").valid();
};
};
that i call when user do something that is not detected regularly with validate plugin. This function manually starts validation again, but only if it has been started before by clicking on submit.