validation on acid

[businessman332211@hotmail.com]

I am having a few problems and some help on these would not only help me solve this problem but allow me to take a step forward in programming. First of all I have set up all php processing and validation already, now what i need to do, is set it up to where it validates with Javascript. I am planning 2 forms of validation, with the functions in an external stylesheet and called into the form areas using events. I was going to do this via 2 events, based on a recommendation from "The Java Script Bible Version 5". This is the book I have been learning, and referencing from since it's one of the best on the market. Mailman broke my photoshop cd(sorry just venting). Back on track there are 2 things I need help with.1.First of all I need to figure out what the current problem is with my current set of code. Ok, below is a cut of my form.Below that you will find the related function added to the external js file, You will not need to reverify it's connection the the said page, as I am 100% sure the page is connected right I have other functions already running from it.

<form name="ideasandsubmissionsform" action="../cgi-bin/form-processors/ideasandsubmissionsprocessor.php" method="post"><fieldset class="formstyle"><legend>Ideas and Submissions</legend><br /><label for="firstname" accesskey="f">*First Name:</label><br /><input tabindex="1" name="firstname" id="firstname" type="text" maxlength="30" onchange="check_f_name return false;" /><br /><label for="emailaddress" accesskey="e">*Email Address:</label><br /><input tabindex="2" name="emailaddress" id="emailaddress" type="text" maxlength="80" /><br /><label for="verifyemail" accesskey="v">*Verify Email:</label><br /><input tabindex="3" name="verifyemail" id="verifyemail" type="text" maxlegth="80" /><br /><label for="description" accesskey="m">*Description:</label><br /><textarea tabindex="4" name="description" id="description" rows="6" cols="30"></textarea><br /><input tabindex="5" name="submit" id="submit" type="submit" value="submit" /><input tabindex="6" name="reset" id="reset" type="reset" value="reset" /></fieldset></form>

function check_f_name() {if (isempty(document.ideasandsubmissionsform.getelementbyid("firstname"))){document.alert('You have not filled out the Firstname Field');}

Now the expected action with this is to go by the following idea.I wanted it to check whether the value exists(meaning whether it's filled in or not) using the isempty() in javascript. I was advised in javascript to do an onchange, and onsubmit command for each one, to give peolpe ahead of time to change it as they go, I cannot get it to work properly.2.The other question I had was, I want to get both so would I put inonchange="whatever" onsubmit="whatever" on every single end of every single input for it to register, or will those cause conflicts with each other, thanks.

[scott100]

onchange="check_f_name return false"should look more like onchange="return check_f_name(this.value)"make the function reuseablefunction check_f_name(val) {if (isempty(val)){return false}I needs a bit of changing, i'll go over it and post back

[businessman332211@hotmail.com]

ok sounds good, what do you mean bythis.valthat confused me a bit.And by making the function reusable, so far I have heard of this, but I don't have a clear understanding, can you give a quick explanation. *IF* you have the timeThank you so far for all the help you have been.Nice picture by the way, good movie.

[scott100]

val should have been value, my typoactually i would use onblur.If you pass values to the function then you can make it reusable by using variables.onblur="return check_f_name(this.value)"gimme a mo and i'll post backAlso, it should be window.alert() not document.alert()

Edited May 18, 2006 by scott100

[businessman332211@hotmail.com]

ok 2 more questions now, I was thinking onblur but I was giving the following recommendation from the javascript bible. So it told me that

Similarly, the interaction between onblur, onfocus, and the alert() dialogbox can be problematic with text input elements. This is why I generally recommend usingthe onchange event handler to trigger form validation routines. If you should employ boththe onblur and onchange event handler for the same element, the onchange event firesbefore onblur.

That was why I was under that impression< i am still fairly new to javascript, but I am getting better.The other question I was wondering, in general, by variable do you mean form value. Because I was under the impression it had to be called either 1 of 2 ways,getelementbyid['idname']ordocument.formname.fieldname.valueCan you call it with just the value name. Sorry for all the questions.

[scott100]

I've not had any problems with onblur, we'll see how it works.Say this is calling the function, you are also passing the value of it's text field to

<head><script>function check_f_name([color="red"]val[/color],[color="green"]field[/color]) {if ([color="red"]val[/color]==""){  alert('You have not filled out the '+[color="green"]field[/color]+' Field');}}</script></head><body><form name="ideasandsubmissionsform" action="../cgi-bin/form-processors/ideasandsubmissionsprocessor.php" method="post"><fieldset class="formstyle"><legend>Ideas and Submissions</legend><br /><label for="firstname" accesskey="f">*First Name:</label><br /><input tabindex="1" name="firstname" id="firstname" type="text" maxlength="30" onblur="check_f_name(this.value,this.id)" /><br /><label for="emailaddress" accesskey="e">*Email Address:</label><br /><input tabindex="2" name="emailaddress" id="emailaddress" type="text" maxlength="80" onblur="check_f_name(this.value,this.id)" /><br /><label for="verifyemail" accesskey="v">*Verify Email:</label><br /><input tabindex="3" name="verifyemail" id="verifyemail" type="text" maxlegth="80" onblur="check_f_name(this.value,this.id)" /><br /><label for="description" accesskey="m">*Description:</label><br /><textarea tabindex="4" name="description" id="description" rows="6" cols="30" onblur="check_f_name(this.value,this.id)"></textarea><br /><input tabindex="5" name="submit" id="submit" type="submit" value="submit" /><input tabindex="6" name="reset" id="reset" type="reset" value="reset" /></fieldset></form></body>

[scott100]

Ok, mine would act something like this.

<head><script>function checkForm(){var total=0;var complete=true;var formLength=document.ideasandsubmissionsform.elements.length;formLength=formLength-2; //ignores submit and reset buttonsmsg=formLength-1;  //this is because a fieldset is usedalert("Checking "+msg+ " fields");for(i=1;i<formLength;i++) {   val=document.ideasandsubmissionsform.elements[i].value;   if((val=="")||(val==null))    {total+=1}; } if(total>0){   alert("You have failed to complete "+total+" fields");   complete=false; }return complete;}function check_f_name(val,field) {if((val=="")||(val==null)){  alert('You have not filled out the '+field+' Field');}}</script></head><body><form onsubmit="return checkForm()" name="ideasandsubmissionsform" action="../cgi-bin/form-processors/ideasandsubmissionsprocessor.php" method="post"><fieldset class="formstyle"><legend>Ideas and Submissions</legend><br /><label for="firstname" accesskey="f">*First Name:</label><br /><input tabindex="1" name="firstname" id="firstname" type="text" maxlength="30" onblur="check_f_name(this.value,this.id)" /><br /><label for="emailaddress" accesskey="e">*Email Address:</label><br /><input tabindex="2" name="emailaddress" id="emailaddress" type="text" maxlength="80" onblur="check_f_name(this.value,this.id)" /><br /><label for="verifyemail" accesskey="v">*Verify Email:</label><br /><input tabindex="3" name="verifyemail" id="verifyemail" type="text" maxlegth="80" onblur="check_f_name(this.value,this.id)" /><label for="description" accesskey="m">*Description:</label><br /><textarea tabindex="4" name="description" id="description" rows="6" cols="30" onblur="check_f_name(this.value,this.id)"></textarea><br /><input tabindex="5" name="submit" id="submit" type="submit" value="submit" /><input tabindex="6" name="reset" id="reset" type="reset" value="reset" /></fieldset></form></body>

[businessman332211@hotmail.com]

I did it exactly like you said and it didn't work. And a few things I wanted to ask. I am not following the script entirely, I think I am use to seeing them different, I tried it, it had an error. What I got wrong before was onsubmit it should be put into the form part, now about onblur, is it work having both, I am still trying to figure out how to get this all set up.

[scott100]

If you copy the code in my post above it is fully working.There are several ways of form validation so yes it may look a bit odd.Also because you aren't using getElementById if you were to change the id's in the form that wouldn't matter, the function still checks everything.document.ideasandsubmissionsform.elements.value

[businessman332211@hotmail.com]

Ok, I looked over your script and thought about it, normally I would use it, and I am deeply thank ful for the attempt. but I thought it would be better, for me to learn how to do it fully, and memorize it myself, I have tried 2 methods, but I am having difficulty getting the right form syntax to get access to the field. let me ask the question in a manner, that doesn't seem confusing. First I will put down the form, then I will show you the 2 ways I try access the right fields, someone whoever can, try to tell me if I am trying to access them improperly or if the syntax is off, I am trying in 2 different ways, I want to learn both, and use them interchangeable, because when I start programming, larger programs for clients sometimes on there site, I want to have a broader distinction of the language.Here is the form

<form onsubmit="return submitcheckideas()" name="ideasandsubmissionsform" action="../cgi-bin/form-processors/ideasandsubmissionsprocessor.php" method="post"><fieldset class="formstyle"><legend>Ideas and Submissions</legend><br /><label for="firstname" accesskey="f">*First Name:</label><br /><input tabindex="1" name="firstname" id="firstname" type="text" maxlength="30" /><br /><label for="emailaddress" accesskey="e">*Email Address:</label><br /><input tabindex="2" name="emailaddress" id="emailaddress" type="text" maxlength="80"  /><br /><label for="verifyemail" accesskey="v">*Verify Email:</label><br /><input tabindex="3" name="verifyemail" id="verifyemail" type="text" maxlength="80" /><br /><label for="description" accesskey="m">*Description:</label><br /><textarea tabindex="4" name="description" id="description" rows="6" cols="30"></textarea><br /><input tabindex="5" name="submit" id="submit" type="submit" value="submit" /><input tabindex="6" name="reset" id="reset" type="reset" value="reset" /></fieldset></form>

Ok here are the 2 methods in which I am trying to access the right fields.#1

document.ideasandsubmissions.firstname.value

or#2

document.getelementbyid('firstname')

#3

document.ideasandsubmissions.getelementbyid('firstname')

#4

document.ideasandsubmissions.firstname.getelementbyid('firstname')

Note 1I am sure that it's not the fourth attempt. I just tried it to be safe.Note 2I am pretty sure it is not the third attempt. I tried it nonetheless.note 3I am 90% sure it is done in the first 2 attempts, the problem is, on both attempts I was not 100% aware how to properly word that statement to call the input field, are the first and second attempts correct methods. If they are then I know I am having difficulties elsewhere and I will know where to look at. Thank you for the time and help.

[aspnetguy]

both attempts 1 and 2 would work except you have small syntax errors.#1document.ideasandsubmissionsform.firstname.value#2document.getElementById('firstname').value

[scott100]

document.ideasandsubmissionsform.firstname.value;document.getElementById('firstname').value;both of these correct.*aspnetguy won the race **edit againRemeber you can also access the form with the elements arraydocument.ideasandsubmissionsform.elements[0]document.ideasandsubmissionsform.elements["firstname"]And also the forms arraydocument.forms[0].elements[0]

Edited May 19, 2006 by scott100

[businessman332211@hotmail.com]

Thanks now I have some stuff clarifyed and some new stuff to play with, I appreciate it, as long as the post is related to this specific form, I will continue to post in this same post, to avoid overcrowding the boards. I will only open a new post when it reaches a few pages, if it gets that far, or when I start up another form.Thanks for all the help.Once I get cemented I will try to started helping some people on the board to give back something.

[businessman332211@hotmail.com]

Another question has now arisen. The question I have now, is."statement first"-Everything is working so far, I pulled it into the file, debugged it, removed it back to the external file, got errors, realized the <script src="" was set to the wrong page, I corrected it, and everything works as planned.Now I have moved on to attempt to add an extra if statement, this is what I have that works with on submit so far

function submitcheckideas() {if (document.ideasandsubmissionsform.firstname.value == ''){alert('Please fill in the Firstname Field before continuing');return false;}else if (document.ideasandsubmissionsform.emailaddress.value == ''){alert('Please fill in the Email Address field before continuing');return false;}else if (document.ideasandsubmissionsform.verifyemail.value == ''){alert('Please fill in the Verify Email Address field before continuing');return false;}else if (document.ideasandsubmissionsform.emailaddress.value != document.ideasandsubmissionsform.verifyemail.value){alert('Your email address and verify email address fields DO NOT match.  Please redo it');return false;}else if (document.ideasandsubmissionsform.description.value == ''){alert('Please fill in the Description field before continuing');return false;}else {return true;}};

I am planning on adding another else if statement in there that is going to check an email field, actually the first one only because the second has to match the first.I want to have an extra else if statement in there now to check the email address field, and see if it contains an @ symbol or a . symbol. For right now that is all I am wanting to do. I checked through all the comparison operators, they check for a lot of things, but not "for the existence of" for instance it seems they check if the 2 match, if they are the non equal, if one is less than the other, ex cetera, but when it comes to scanning a variable for another variable they don't have that operator, if they did, I could just write up one to check the field emailaddress, and have it check the whole field for the @ symbol and the . symbol, and if it didn't find them it would return false, but unfortunately I don't see any comparison symbols for this, if there are, or if one of the comparison operators does this automatically, then all I need to know is which operator is it, knowing that I can do the rest myself. Thanks for the help.

[scott100]

If you check you book for regular expressions they deal with checking patterns in numbers/text.http://javascript.internet.com/forms/email...on---basic.htmlthis line will interest you mostif (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(myForm.emailAddr.value))Its checking the input against a regular expression.

[businessman332211@hotmail.com]

Ok I will look into that, for now though I am going to bypass this step, I have forever to play with my site, right now i need to get my other form built, and processed and validated so I can have everything operation and get ready to start accepting clients soon. Thanks for all the help.