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.
Related
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.
I have a webpage which has check-boxes, input fields, dropdowns etc.,
Mandatory conditions are checked using javascript. If anyone fails to fill these fields and press next button validation errors popup.
Now what I want to achieve is when someone fails to enter information in the mandatory fields, the cursor should go to the first field which caused the error.
Can anyone suggest me how to do this?
Add a class (something like input-error) for every invalid field. Then use something like:
var errors = document.querySelectorAll(".input-error");
if (errors.length > 0) {
errors[0].focus();
}
Here's an example: http://jsfiddle.net/NtHzV/1/
It really all depends on the structure of your code, how you're validating, what you're actually doing with validation, and what your HTML is.
At the same time, if you're doing something similar to my example, you might as well keep track of the first input with an error, then focus() it at the end of validation. Something like this:
http://jsfiddle.net/NtHzV/2/
UPDATE:
Bergi pointed out that querySelector might as well be used (instead of querySelectorAll) because you're only looking for the first input with errors. So here's an update:
var error_input = input_area.querySelector(".input-error");
if (error_input !== null) {
error_input.focus();
}
http://jsfiddle.net/NtHzV/3/
Here's specs on querySelector: https://developer.mozilla.org/en-US/docs/DOM/element.querySelector - Note that < IE8 does not support it.
The use of ".input-error" is because that is the CSS class selector, and will find the first (if any) element in a specific area with the class "input-error".
This line will focus the page on the element you specify. You should be able to implement this into your validation checks to focus on the bad elements.
document.getElementById("ID_Of_bad_field").focus();
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.
I'm creating a form, that needs to have examples in the input fields. So when you click in them, example will toggle away and you can insert your own value.
Also the examples need to be in a different class. And I think the best way to load the examples, is from the title tag. Because, when I submit the form.. I don't want the examples to count.
Currently Im using this jQuery plugin: http://jquery.kuzemchak.net/toggleval.php
It basically works like it should, but the issue is with the submit. To clear out the input fields on submit, I made this script:
$(".formtable_submit").hover(function () {
$(this).parents("form").find("input").each(function () {
$(".toggleval:not(.toggleval_foc)").val("");
});
});
So if you hover over submit, it will clear out all input fields with .toggleval class, but not the ones with user-inserted values in them (.toggleval_foc class).
I could also add to that script, that when you hover-out, then it would display the examples again.. But its not the best solution. The best way would be display them from title tag and on submit, the value tag would as it is.
If you could point me to a script or some idea, that would be awesome. I could not find any such script that worked.
What you are describing is placeholder functionality, and it should not be accomplished as a polyfill by putting any values into the real input fields, thus negating your need to clear out invalids on form submittal.
I suggest switching to a plugin that already has this stuff figured out, such as any of the plugins on this page under Web Forms: input placeholder. Modern browsers let you style the placeholder using the ::placeholder CSS pseudo-element and most of these polyfills give you a classed element to style for older browsers.
Put your default values in the field initially, give them a class of wipe, then try something like this...
$('.wipe').addClass('wipeDefault'); $('.wipe').focus(function() {
if (this.value == this.defaultValue) { this.value = '';
$('.wipe').removeClass('wipeDefault');
$(this).removeClass('wipeDefault'); } });
$('.wipe').blur(function() { if (this.value == '') {
this.value = this.defaultValue;
$('.wipe').addClass('wipeDefault');
$(this).addClass('wipeDefault'); } });
Why not bind to the form's submit event instead of the hover? If you do something like this:
$('selector-for-your-form').submit(function() {
$(this).find('input:not(.toggleval_foc)').val('');
return true;
});
Then you'll clear out the default example values right before the form is submitted. You will, of course, have to supply a real selector in place of 'selector-for-your-form'.
I had a requirement where I need to clear off the "select all" checkbox in case user manually deselects any of the data rows.
This has been accomplished by detecting this during an onRowSelect (jqgrid event) event.
The code snippet is as below and works as expected.
onSelectRow: function(){$("input:checkbox[id='cb_jqg']").removeAttr('checked');}
The thing I wonder about is whether I should check the checkbox for already selected before I clear it off or can I simply clear it (as it does not have any impact) as done above.
Is there any performance / code ethic issues with the syntax I used?
Adding a check before setting the value will be slower than just arbitrarily setting them all simply because it has to do the check.
Ethically, it's not gonna throw an error, so all's fair in love and coding, right?
This looks like you have multiple checkboxes with the same id. This is invalid in HTML. You could instead use the same name for these checkboxes.
Also, the more standard way of setting the checkedness of a checkbox is simply setting the checked property of the checkbox element to true or false, rather than rely on jQuery's attribute handling methods.