I'm attempting to validate whether a group of radio buttons is checked in order o validate a form.
function formValidator() {
var triedIt = document.getElementsByName('tried');
if(radioChecked(triedIt, "Please select") {
return true;
}
return false;
}
function radioChecked(elem, helperMsg) {
if(document.myform.tried.checked == 1) {
return true;
}
else {
alert(helperMsg);
elem.focus();
return false;
}
}
This returns the alert, but for some reason the form gets processed anyway. I'm wondering what I'm doing wrong... any help would be appreciated.
If you're wondering why I don't just use jquery etc... its unfortunately not an option. Thanks!
I think it's happening because document.getElementsByName('tried') returns array of elements. So, when you call elem.focus() it will throw error (because array haven't method focus) and js stops execution.
function formValidator(){
var triedIt = document.getElementsByName('tried');
if(radioChecked(triedIt, "Please select")){
return true;
}
return false;
}
function radioChecked(elem, helperMsg){
if(document.myform.tried.checked == 1) {
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
try this i think you skipped one closing bracket ) in if(radioChecked(triedIt, "Please select")) that`s why its happening
Related
I'm trying to disable an input in a form, but only after validation of fields.
function valJomclAddForm() {
f = document.jomclForm;
document.formvalidator.setHandler('list', function (value) {
return (value != -1);
});
if (document.formvalidator.isValid(f)) {
if(document.getElementById('membership6') === null) {
return false;
}
jQuery('input#submit').val('Publishing...');
jQuery('input#submit').prop('disabled', true);
return true;
} else {
//alert
}
}
but when function gets here:
jQuery('input#submit').prop('disabled', true);
return true;
Function stops, change input value to "Publishing" but doesn't publish, doesn't get the "return true"
Unless I remove jQuery('input#submit').prop('disabled', true);then function return true and publish this...
Why does this not work?
Thanks a lot in advance!
So I have a form, and if the input is invalid, I won't let the form pass like so
$(".main-form").submit(function(e){
return false;
});
This won't let the form pass. When the user complete everything correctly I try to do this
$(".main-form").submit(function(e){
return true;
});
But for some reason it stays false all the way though. Any workarounds?
You should use a single submit handler:
$(".main-form").submit() {
if (...) {
return true;
} else {
return false;
}
}
where ... contains your validation checks. The actual code might be somewhat more complex, e.g.
if (field1 is invalid) {
return false;
} else if (field2 is invalid) {
return false;
}
...
} else {
return true;
}
You have to clear the old handler, so you'd initialize it like this:
$(".main-form").on('submit', function(e){
return false;
});
Then to change the handler:
$(".main-form").off('submit');
$(".main-form").on('submit', function(e){
return true;
});
I am doing a checklist that needs to be completed each time a member of staff completes this particular form. Please note that I am still grasping JS slowly due to not having a large amount of time to research.
I have done a bit of research and combined some different validation styles and come up with this;
function validate(form) {
var e = form.elements;
if(e['reloaded'].value == "yes") {
if(!e['Q1-A'].value) {
alert('You Must complete the Checklist!');
return false;
}
if(!e['Q1-B'].value) {
alert('You Must complete the Checklist!');
return false;
}
if(!e['Q1-C'].value) {
alert('You Must complete the Checklist!');
return false;
}
if(!e['Q1-D'].value) {
alert('You Must complete the Checklist!');
return false;
}
if(!e['Q1-E'].value) {
alert('You Must complete the Checklist!');
return false;
}
if(!e['Q1-G'].value) {
alert('You Must complete the Checklist!');
return false;
}
if(!e['Gen-A'].value) {
alert('You Must complete the Checklist!');
return false;
}
if(!e['Gen-B'].value) {
alert('You Must complete the Checklist!');
return false;
}
if(!e['invoice_number'].value) {
alert('Invoice Number is REQUIRED!');
return false;
}
return true;
} else if(e['reloaded'].value == "no") {
if(!e['Gen-A'].value) {
alert('You Must complete the Checklist!');
return false;
}
if(!e['Gen-B'].value) {
alert('You Must complete the Checklist!');
return false;
}
if(!e['Q2-A'].value) {
alert('You Must complete the Checklist!');
return false;
}
if(!e['invoice_number'].value) {
alert('Invoice Number is REQUIRED!');
return false;
}
return true;
} else if(!e['reloaded'].value) {
alert('You must indicate if you Reloaded the OS!');
return false;
}
}
At this stage it is simply returning "You must indicate if you Reloaded the OS!" even when it is selected.
The point is to select an option from a radiobutton selection, then it will show some checkboxes and all checkboxes must be checked before the form can be submitted. Obviously some checkboxes only show if a particular option is selected and as such some need to be excluded from being required.
There is also an additional field that needs to be filled (invoice_number) which has always had validation on it and has always worked.
The Radio Buttons:
<input name="reloaded" id="reloaded" type="radio" value="yes" onClick="Q1(this.value);" /> Yes</label> <label><input name="reloaded" id="reloaded" type="radio" value="no" onClick="Q1(this.value);" />
The Checkboxes are all the same except the ID's/Names
<input name="Q1-A" id="Q1-A" type="checkbox" value="yes" />
Required Text Box:
<input class="field size5" type="text" name="invoice_number" id="invoice_number" placeholder="Required! - 'RA' for Warranty Jobs" />
I am sure that I have over complicated it due to my lack of knowledge, however I just cannot think of where i have gone wrong.
(Submission is occurring via onsubmit="return validate(this);")
The following code was my final result and it works;
function validate(form) {
var e = form.elements;
if(document.getElementById('RL-Y').checked) {
if(!e['Q1-A'].checked || !e['Q1-B'].checked || !e['Q1-C'].checked || !e['Q1-D'].checked || !e['Q1-E'].checked || !e['Q1-G'].checked || !e['Gen-A'].checked || !e['Gen-B'].checked) {
alert('You Must complete the Checklist!');
return false;
}
if(!e['invoice_number'].value) {
alert('Invoice Number is REQUIRED!');
return false;
}
return true;
} else if(document.getElementById('RL-N').checked) {
if(!e['Gen-A'].checked || !e['Gen-B'].checked || !e['Q2-A'].checked) {
alert('You Must complete the Checklist!');
return false;
}
if(!e['invoice_number'].value) {
alert('Invoice Number is REQUIRED!');
return false;
}
return true;
} else {
alert('You must indicate if you Reloaded the OS!');
return false;
}
}
I have many forms generated dynamically via PHP. I'm trying to verify that all the fields on the one form that's going to be submitted are filled. I'm just starting to JQuery, so I'm sorry if the answer is stupidly easy.
I tried this:
$('.myform').submit(function(){
var flag = true;
$('.myform input').each(function() {
if($(this).val() === ''){
flag = false;
return false;
}
});
return flag;
});
But when in the second form, it goes and checks the first one (which should be empty because you're not filling that one...)
Thanks in advance!
$('.myform').submit(function(){
var flag = true;
// use $(this) below which is the form has submit event fired.
$(this).find('input').each(function() {
if($(this).val() === ''){
flag = false;
return false;
}
});
return flag;
});
Or you could simplify your code by:
$('.myform').submit(function() {
return $(this).find('input').filter(function() {
return $.trim($(this).val()) !== '';
}).length == 0;
});
I make a simple validation plugin, that return false if input fail validation, the problem is this plugin only works with one input at a time. I want it to work with all input at the same time.
the code
$.fn.validate = function(options){
var defaults = {
required:true,
minChar:0,
maxChar:0
},
o = $.extend({},defaults, options);
this.each(function(){
var $this=$(this);
var val = $this.val();
if(o.required==true && val==''){
return false;
}else if(o.minChar>0 && val.length < o.minChar ){
return false;
}else if(o.maxChar>0 && val.length >o.maxChar ){
return false;
}
else{return true;}
});
}
call
if(!$('#name').validate()){
$('.name_inline_error').text('require name');
return false;// return false to stop ajax form submiting
}
if(!$('#email').validate()){
$('.email_inline_error').text('require email');
return false;// return false to stop ajax form submiting
}
What the code will do is, if two inputs are empty, the plugin will only tell the name input error, only when the name input was validated, the form will tell the email input error. While, I want to see two errors at the same time.
When you return, you are skipping the rest of your function. Try something like this:
valid = true;
if(!$('#name').validate()){
$('.name_inline_error').text('require name');
valid = false;
}
if(!$('#email').validate()){
$('.email_inline_error').text('require email');
valid = false;
}
return valid;
(+1 to Matt Ball's comment, however -- rolling your own on this one is going to take a long time.)