I am trying to run a form validation on an HTML form to make sure the person has filled out the two fields. I put together a JSFiddle here:
http://jsfiddle.net/yCqqj/
It has worked previously for me and I don't know what's going on now. I made a JSFiddle to pull it out of my site to make sure nothing else was conflicting with it but I'm realizing now that it's something in the code. The two fields are name "emailaddress" and "Name" respectively and it looks like I'm checking their values correctly. Basically, I'm looking for an alert (and NOT a submittal of the form) if they've left either field blank. Thanks for helping me track down the problem. I appreciate it.
function ValidateForm(){
var emailID=document.MailingList.emailaddress
var nameID=document.MailingList.Name
if ((nameID.value==null)||(nameID.value=="")){
alert("Please Enter your Name");
nameID.focus();
return false;
}
if ((emailID.value==null)||(emailID.value=="")){
alert("Please Enter your Email ID");
emailID.focus();
return false;
}
}
Even though there is not return true, the form still submits.
the problem is that you haven't defined ValidateForm in the Head section.
i have edited the jsfiddle.check demo.
I can see two problem:
First, what is echeck? If I take that code away it will work.
Second you should not do return after your control of the nameID.value. If you do that your control of the emailID.value will not be done.
To piggyback on Behnam's answer, it is because ValidateForm isn't defined in the head section as he said. But here's how to fix it:
In jsfiddle, in the upper left area in Frameworks & Extensions, set it to no-wrap . Then update and set as base to save your changes.
Related
I have a form, in the form there is a custom component that has certain fields in it. At the end of the form there is a button. The button has...
disabled.bind="!(formValid && subFromValid)"
Now, on the custom component I have a two-way binding of a variable "subFormValid" The subFormValid is only valid when the validation in the custom component is valid. So, the sub form validates some fields and sets subFormValid = true. Even though the "formValid" is false, the button is now enabled.
I can't figure out why and it is driving me nuts. I even went so far as to add a get function to a variable and add console logs in it, like so...
<button type="submit" disabled.bind="wholeFormValid">Submit</button>
Then in my class I have...
get wholeFormValid() {
console.log("validating form");
console.log(!(this.formValid && this.subFormValid));
return !(formValid && subFormValid);
}
I get a million plus lines in the console, but I was able to watch it, the entire time. When I first load the page it was logging...
validating form
true
Then I filled out the subform, and checked the console. The console showed...
validating form
true
Yet, the button was now enabled.
For some reason whenever subFormValid = true, the button is enabled, regardless of formValid.
Does anyone know how to disable a button unless 2 conditions are met? Everything I do enables the button as soon as subFormValid is true, even though the console is still logging "true", which should disable the button.
Just to help out, if anyone is wondering why there is a subform in the form it is because the address needs to be validated using Smarty Streets and we want to be able to reuse that part of the form in other places, so I created a custom component for the address section that validates the input, and validates the address. It is being called in the form like so...
<require from="components/smarty-streets"></require>
Then using like this...
<smarty-streets form-is-validated.two-way="subFormValid"></smarty-streets>
Then in smarty streets I have...
#bindable formIsValidated;
and I change the value from true to false and vice-versa depending on the validation in the component.
I have tried to recreate your problem using the following:
<input type="checkbox" checked.bind="formValid"/>
<input type="checkbox" checked.bind="subFormValid"/>
<button disabled.bind="wholeFormValid">Submit</button>
I noticed in your function that you used this.formValid in the console.log line, but in the return line you used formValid, without this. This seems to be a different variable than your actual binding variables. I think your function should look like this:
get wholeFormValid() {
console.log("validating form");
console.log(!(this.formValid && this.subFormValid));
return !(this.formValid && this.subFormValid);
}
Edit: I also strongly recommend using the #computedFrom decorator on your get() to reduce the amount of calculations aurelia does. You can read more on that here.
Good day all.
I have a form where users must fill out some fields, and this form is created dinamically y a php script.
I've done a script that do a test on input fields to check if the users has filled everything.
It is basically a cascade test in where if an error variable is true, the form isn't submitted.
I have done some modifications and I have added a new hidden field to the form, filled by jquery when user clicks a image.
$( '.selectLogo' ).bind("click",function(e){
$( "#operator" ).val( $(this).data("opvalue") );
});
then, on the submit event, there is the whole test...
if ( !$( "#operator" ).val().length ){
$(".operatorError").show();
error=true;
} else{
$(".operatorError").hide();
}
if(error){
return false;
}
this is the last test I've added on the function, just before testing the error variable and decide if return true or false.
the problem is that:
IF i'm debugging the script, i.e. I put a breakpoint just over the if(error), everything is fine.
IF i filled the whole form, i.e. the checkForm function just go throught every test and arrive on the decision of returning true or false, everything is ok.
BUT if i filled the form partially, and I try to make a submit without selecting the operator (the new field i've added), the checkForm function stops me, display the error, but at this point, I must click on the operator logo to make the hiden field fills, then I have to click SEVERAL (read 2,3 or sometimes 4) times the submit button to have the form submitted.
It sounds like that the error variable retain the value, and the jQuery cache it... or something, does anyone has experienced a similar problem? it is possible to "force" jQuery to "really" test a variable...? Am I complitely wrong and maybe the problem is elsewhere?
I currently have two of the same contact forms being used on a webpage. One is on every page- in the banner, and another version of it is in the main section of the contact page itself. This is what I use to validate it:
$(".contactform").each(function() {
$(this).validate();
});
However, when I click submit on either of the forms, the opposite one of it (the unused one) comes back showing errors. I don't want the person to have to fill in both (as they are the exact same form) and am a bit confused on where to go from here.
What I ended up doing according to xnnyygn's answer was adding in separate .validate rules by id, when done by class or form this would not work and exhibit first selection error result.
$("#contactform1").validate({
rules: {
field: {
required: true
}
}
});
$("#contactform2").validate({
rules: {
field: {
required: true
}
}
});
$(document).ready(function(){
$("#contactform1").validate();
$("#contactform2").validate();
});
I ended up using two ids instead of a class or form selector here. Doing otherwise will not work. Lesson learned, with jquery.validator you must use ids.
This is my test HTML, from http://docs.jquery.com/Plugins/Validation#source, adding a duplicated form with same class.
I've tried to call validate directly, but the first form was validated when I press the second submit button. However, calling validate separately works well.
The reason why validator 'jumps' to another form may be that jquery validator only take the first element(form) and apply the rules. See the source for more detail.
Not sure if it solves this problem, but you shouldn't need to use '.each()' explicitly. Just write:
$(".contactform").validate();
So I'm trying to write an interactive form, where clicking a radio button will unhide another field in the form. It is for display purpose, so I'm not submitting anything. I'm attempting to use Javascript to validate, but needless to say, it's not working very well. A run through of my code would be appreciated.
Since it's so much code, I'll pastie it to you for convenience...
http://pastie.org/3615669
Thanks :)
Your code:
function getShrimpa(radio, name, ext){
//Use of form 'shrimpa'.
var form = document.shrimpa;
document.form.name.style.display = 'block'; // <---- this is not valid
document.getElementById('shrimpa').innerHTML = ext;
}
You cannot use the variable name like that. It's a string and it will not get "replaced" or whatever you were hoping would happen. You'll need to use document.getElementsByName(name) to select that element. But that will give you a node list so you probably want to use ids instead there.
Another jqgrid question. On my page i got a select drop down. If nothing is selecting and the user click to add record, the edit form should no popup. I can't seems to find how to do this in google. Here is what I have:
afterShowForm:function(formid) {
if ( ($('#listbox').val()) == "" ) {
alert('Please select an option.');
$('#'+formid, form).hide();
return false;
}
}
The above code is not working. It actually got error - form is not defined. Should I be using afterShowForm or is there a more proper way to do it.
Thanks.
Ok guys. I found a 'solution' but I am not sure if that is the best way to do it (I think it is not :) ) but it gets the job done.
Instead of using formid pass in through the function, I have view source and get the id of the edit form id. For my case the id is #editmodmy_table. So to hide the form from showing, I just use jquery to do it.
$('#editmodmy_table').hide();
Other than that, we have to get rid of the overlay that is attached to the edit form modal as well. Hiding the edit form don't hide the overlay automatically. So we have to do this:
$('.jqmOverlay').hide();
Hope this helps someone.
Please post a better solution to this if any. Thanks.
The error in this code means that the variable 'form' is not defined.
If I understand this correctly that variable is not needed.
To find the form and hide it you could try something like this instead:
$('form#'+formid).hide();