Javascript validation of form

arendt73
arendt73 used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2013

Commented:
Post the HTML for the form. please.


Cd&

Author

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
Top Expert 2013

Commented:
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&
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Top Expert 2013

Commented:
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&

Author

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!
Top Expert 2013

Commented:
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&

Author

Commented:
Thank you for your assistance. Looking forward to seeing your expert suggestion.
Top Expert 2013

Commented:
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&

Author

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.

Top Expert 2013

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


Cd&

Author

Commented:
Thank you!  Looking forward to it.
Top Expert 2013

Commented:
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&

Author

Commented:
Great, thank you again. Looking forward to seeing that fix and final code.
Top Expert 2013
Commented:
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

Author

Commented:
Although the Expert took the time to work with me, the solution was partial but helpful.
Top Expert 2013

Commented:
The solution was partial, because the total solution requires a re-write. :^(


Cd&

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial