Javascript validation of form

I have javascript validating an online submission form. It works (kind of) but I want to add one feature and an enhancement.  The code is at the bottom.

First thing, if a person attempts to submit a form with required fields not completed, they will receive a pop-up stating that the field has not been selected or text is missing. When this occurs, the Submit button becomes grayed out. At this point, in order for the person to submit information, they will have to reload the page and lose the information already entered/selected. Obviously, I do not want a user to submit without proper fields entered/selected, but would like the Submit button to become "un-grayed" or released to allow the user to populate the necessary fields.

Second, a user has to make a selection in a drop-down menu titled "OrderCaption" and it has several choices (titles) to select from. If a user selects the last option, a textbox appears titled "self_title" (controlled by javascript).  In the textfield "self_title", the user will enter their own title.

I would like to make sure that if the last choice in OrderCaption1 is selected, validation of this field will occur and that the "self_title" field contains characters and not remain empty during a submission. The value of the last option in OrderCaption that unhides the "self_title" textbox is: 0.  

Any assistance with the code is greatly appreciated.  Thank you!

 
<script language="JavaScript" type="text/JavaScript">

function validateForm() {
	var oFm = document.chapter13;
	var rtnValue = true;
	var oneEntry = false;
	if (!ckFld(oFm.Attachment1)){
		oneEntry = true;
		if ( ckFld(oFm.CaseYear1) || ckFld(oFm.CaseNumber1) || ckFld(oFm.OrderCaption1) ) {
	 		alert("Please complete all fields for Case #1 before pressing submit button");
	 		rtnValue = false;
	 	}	 
	}
	if (!ckFld(oFm.Attachment2)){
		oneEntry = true;
		if ( ckFld(oFm.CaseYear2) || ckFld(oFm.CaseNumber2) || ckFld(oFm.OrderCaption2) ) {
	 		alert("Please complete all fields for Case #2 before pressing submit button");
	 		rtnValue = false;
	 	}	 
	}
	if (!ckFld(oFm.Attachment3)){
		oneEntry = true;
		if ( ckFld(oFm.CaseYear3) || ckFld(oFm.CaseNumber3) || ckFld(oFm.OrderCaption3) ) {
	 		alert("Please complete all fields for Case #3 before pressing submit button");
	 		rtnValue = false;
	 	}	 
	}
	if (!ckFld(oFm.Attachment4)){
		oneEntry = true;
		if ( ckFld(oFm.CaseYear4) || ckFld(oFm.CaseNumber4) || ckFld(oFm.OrderCaption4) ) {
	 		alert("Please complete all fields for Case #4 before pressing submit button");
	 		rtnValue = false;
	 	}	 
	}
	if (!ckFld(oFm.Attachment5)){
		oneEntry = true;
		if ( ckFld(oFm.CaseYear5) || ckFld(oFm.CaseNumber5) || ckFld(oFm.OrderCaption5) ) {
	 		alert("Please complete all fields for Case #5 before pressing submit button");
	 		rtnValue = false;
	 	}	 
	}
	
 	if (rtnValue && oneEntry) {oFm.submit();} else {resetSub();}
}

function resetSub(){
	var oBtn = document.chapter13.send;
	oBtn.disabled=false;
	return true;                
}

function ckFld(oFld) {
	var rtnEmpty = false;
	var txt = oFld.value ;
	if (txt == null || txt.length == 0 || txt.substr(0,2).toLowerCase()=="no") {rtnEmpty=true;}
	return rtnEmpty;
}
</script>

Open in new window

arendt73Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

COBOLdinosaurCommented:
Post the HTML for the form. please.


Cd&

0
arendt73Author Commented:
I have attached the submission page as requested (in HTML). I removed the database insertion information to keep the file small.

Again, thank you for your assistance!

experts.html
0
COBOLdinosaurCommented:
Okay I think I figured out the problem on the re-enable, you can look at that while I work on the other one.  The problem is here:

<input type=button onClick="this.disabled=true; hiddenbutton.name=this.name;hiddenbutton.value=this.value;validateForm()" name=send value="Submit ">

Open in new window


You are giving the hidden button the same name as the submit button.  The scripting then enables the first element that it finds with the name "send", and that is the hidden input.



Cd&
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

COBOLdinosaurCommented:
Okay, I think I got what you need for the other problem:

First we need to add a function call to the onchange event:

<input name="required_field" type="text" class="text-medium" style="visibility:hidden;" 
onChange="chapter13.required_field.value=filterNum(chapter13.required_field.value);testEmpty(this.value,chapter13.OrderCaption1);" 
size="28" maxlength="60">

Open in new window


The new function is:

function testEmpty(x,y)
{
    if (x=="")
    {
        alert('a value must be entered');
        y.selectedIndex=0;
        y.focus();
     }
}

Open in new window



Cd&
0
arendt73Author Commented:
I applied your suggestions.  Nothing happens and the form continues to be submitted.

I added the onchange event (required_field) as well as adding the function testEmpty to the bottom of th e last javascript script with no luck.  

I am not sure what you meant with regards to the hidden field having the same name as the submit button, as it does not.

While testing, no pop-up messages occur if a user attempts to submit without completing the necesary fields. Even if the the "required_field" is blank, the form is submitted.

It appears that the original validation is functioning, but the error mesages do not appear and the "required_field", regardless if something is entered or not, still gets submited.

I appreciate your assistance. Any other suggestions is greatly appreciated. Thank you!
0
COBOLdinosaurCommented:
Where you have "hiddenbutton.name=this.name "  It changes the name of the hidden button to the same name as the input.


I think I see the what is wrong with the empty field.  We are running it off of an on change event, but if they do not enter anything there is no onchange event.  I think we will have to force focus and the run the check on the blur.  I'll be back in a bit with some reworked code.

Cd&

0
arendt73Author Commented:
Thank you for your assistance. Looking forward to seeing your expert suggestion.
0
COBOLdinosaurCommented:
Okay I think we can manage this with small changes.  First the select fires the function Handle_Required(this.value)
and we need to add a new final line so it looks like this:

function Handle_Required(val){

var required = document.chapter13.;
if (val == "0"){
required.style.visibility = 'visible';
required.value="";//reset field;
required.focus;
}
else{
required.style.visibility ='hidden';
}
}

Open in new window


Now we change the onchange of required_field to an onblur:

<input name="required_field" type="text" class="text-medium" style="visibility:hidden;" 
onblur="chapter13.required_field.value=filterNum(chapter13.required_field.value);testEmpty(this);" 
size="28" maxlength="60">

Open in new window


Finally we simplify the test function:

function testEmpty(x)
{
    if (x.value=="")
    {
        alert('a value must be entered');
        x.focus();
     }
}

Open in new window



Cd&
0
arendt73Author Commented:
I am sorry to be a pain. Can you attach the modfied page? I am still not seeing any validation of the required_field and I'm afraid I'm the one not inserting/changing the correct areas of the form.

Thank you.

0
COBOLdinosaurCommented:
Okay, but I have it in pieces let put it together and upload it.


Cd&
0
arendt73Author Commented:
Thank you!  Looking forward to it.
0
COBOLdinosaurCommented:
Now that I have it put back together I ran the full form as it was and now of the validation works.  Your logic is backwards.

On an empty entry ckFld returns true when the field is empty and you are testing it for false.  the whole thing is wrong from the start.

I fix that error and add the changes I recommended, then I'm out of here.


Cd&
0
arendt73Author Commented:
Great, thank you again. Looking forward to seeing that fix and final code.
0
COBOLdinosaurCommented:
Given the overall quality of the code I would not bet that it is everything you want.  It is such a mess I'm not sure what some of the code is doing.  If a page like that showed up in a project I was doing, I would assign it for cleanup and re-write.  

In any case the revised version is attatched.  If it still needs work and you can't do it, I would suggest it is time you hired someone to re-write it for you.

Cd&
experts.html
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
arendt73Author Commented:
Although the Expert took the time to work with me, the solution was partial but helpful.
0
COBOLdinosaurCommented:
The solution was partial, because the total solution requires a re-write. :^(


Cd&
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.