Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Shaun E on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

form validation issue 2

Status
Not open for further replies.
hererxnl

hererxnl

Technical User
Jul 8, 2003
239
US

I've been using a function in my forms to validate field values prior to submission. Pretty standard stuff. JS is really not my thing but it's very useful in these situations.

I have a <textarea> for user input on a page. The goal is to validate the input conditionally and I've modified my function as such. However, I'm obviously doing this wrong as the form is being submitted either way, which I've learned is what happens in JS when you screw up the coding for validation.

In a nutshell, if the <textarea> value is blank I don't want the form submitted and I want to return focus to the field. If the <textarea> has a value greater than "" than I want the user to confirm that they are ready for submission. Here's the function as it sits:

Code: 
function validateSubmission(DT)
{
if(document.DT.DTest.value == "")
	{
	document.DT.DTest.focus();
	return false;
	}
if(document.DT.DTest.value > "")
	{
	if(confirm("Click 'OK' to confirm that you are done with\nthe test and would like to submit your report.\n\nOtherwise click 'Cancel' now."))
	{ 
	return true;
	} 
	{ 
	document.DT.DTest.focus();
	return false;
	}
	}
}

Someone please show me where I've botched this.

Thanks in advance.

 
Sort by date Sort by votes
How do you have your form tag setup? It should be something like the following:

<form name="myForm" action="..." method="..." onSubmit="return validateSubmission(WhateverDTIs);">

According to my mistakes in the past you probably did not put the 'return' in the onSubmit="". Let me know if you did and the problem is something else.

The most likely way for the world to be destroyed, most experts agree, is by accident. That's where we come in; we're computer professionals. We cause accidents.
 
Upvote 0 Downvote
Here's a quick and easy way to check a textarea to see if it contains a value. Try incorporating this validation into your application:
Code: 
<html>
<head>
<script language=javascript>
function validateForm() {
   txt = document.forms["frm"].elements["ta"];
   if (txt.value.length == 0) {
      alert("You cannot leave this textarea blank");
      txt.focus();
      return false;
   }
   alert("Form validated successfully");
   return true;
}
</script>
</head>
<body>
<form name=frm onsubmit='return validateForm()'>
<textarea name=ta></textarea><br>
<input type=submit value='submit form'>
</form>
</body>
</html>

-kaht

Do the chickens have large talons?
 
Upvote 0 Downvote

Alright, this is almost producing the desired results. Confirm box is displayed only when value is greater than "" however clicking Cancel is still submitting the form. Updated code:

Code: 
function validateSubmission(DT)
{
if(document.DT.DTest.value == "")
{
document.DT.DTest.focus();
return false;
}
if(document.DT.DTest.value > "")
{
if(confirm("Click 'OK' to confirm that you are done with\nthe test and would like to submit your report.\n\nOtherwise click 'Cancel' now."));
{ 
return true;
} 
{ 
document.DT.DTest.focus();
return false;
}
}
}

So close...

 
Upvote 0 Downvote

klaforc:

Thanks for the help. I'm pretty sure the form tag is good. I'll post in anyways:

Code: 
<form name="DT" method="post" onSubmit="return validateSubmission(DT);" action="DTProcess.asp">

The reason I say this is I can get it to return when no value is submitted.

Ideas?? I'm sure its something stupid with my conditional statement. Usually work with vb & vbs in asp pages and the differences are just enough to really screw with your brain.



 
Upvote 0 Downvote
Code: 
<form name="DT" method="post" onSubmit="return validateSubmission(this);" action="DTProcess.asp">

Code: 
function validateSubmission(f) {
    if(f.DTest.value == "") {
        f.DTest.focus();
        return false;
    }

    if(f.DTest.value > "") {
        if(confirm("Click 'OK' to confirm that you are done with\nthe test and would like to submit your report.\n\nOtherwise click 'Cancel' now.")) {
            return true;
        } else {
            f.DTest.focus();
            return false;
        }
    }
}

you were missing an else. it helps to indent your code.

also, call the function as i did above.

*cLFlaVA
----------------------------
[tt]a frickin' twelve-gauge, what do you think?[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
I'm not sure what the last set of braces is supposed to do, and I'd recommend checking for the length of document.DT.DTest.value rather than the contents because a value of zero might give you a false test value:

function validateSubmission(DT)
{
if(document.DT.DTest.value.length == 0)
{
document.DT.DTest.focus();
return false;
}
if(document.DT.DTest.value.length > 0)
{
if(confirm("Click 'OK' to confirm that you are done with\nthe test and would like to submit your report.\n\nOtherwise click 'Cancel' now."));
{
return true;
}
document.DT.DTest.focus();
return false;
}
}

Lee
 
Upvote 0 Downvote

Thanks so much cLFlaVA, a star for you. Indented code get's weird to read on these forums so outdent it was.

What's the reasoning with calling the function that way? I'm always concerned with "best coding practices".

 
Upvote 0 Downvote

trollacious: desperate typing mistake. Good point about comparing for length. Another star has risen.

 
Upvote 0 Downvote
well, you were passing DT, not in quotes. that doesn't mean anything. you could have passed "DT" in quotes, but then you still weren't properly referencing it in the function.

had you passed in "DT", you could have reference it like
Code: 
document.forms[variableName].blahblah

however, might as well just pass [tt]this[/tt] which means, this current object.

then, you can reference it directly, like
Code: 
this.blahblah
.

hope that clarified. also, i disagree with you that indenting makes things harder to read. compare our code.

*cLFlaVA
----------------------------
[tt]a frickin' twelve-gauge, what do you think?[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
Yeah trollacious, GREAT point about comparing for length. Wish I woulda thought of that above in my post.

-kaht

Do the chickens have large talons?
 
Upvote 0 Downvote
word [thumbsup2]

-kaht

Do the chickens have large talons?
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
818
JScannell
JScannell
JPSeo
  • Locked
  • Question
--How to implement req.body.param validation
Replies
0
Views
239
JPSeo
JPSeo
JPSeo
  • Locked
  • Question
Another cjhild_process.exec issue with complex shell command
Replies
0
Views
250
JPSeo
JPSeo
Dara2020
  • Locked
  • Question
Jquery Conflict between Mega-Menu and MailChimp form
Replies
0
Views
237
Dara2020
Dara2020
rogerte
  • Locked
  • Question
Javascript updating form control not working
Replies
3
Views
472
rogerte
rogerte

Part and Inventory Search

Sponsor

Back
Top