Solved

Validate and Submit

Posted on 2007-11-25
8
369 Views
Last Modified: 2009-07-03
Hi All,

I have been wracking my brain all morning and haven't come up with anything so here goes:

I have a form with this basic structure:

<form action="script.php" name="askExpert" onSubmit="return validateForm(this)" />

/-----Form Input fields-----/

<a href="javascript:document.askExpert.submit();">
<img src="submitbutton.jpg" alt="Submit" border="0"></a>
</form>

The form submits perfectly.
When I strip out the ---><a href="javascript:document.askExpert.submit();"><--- the validation works perfectly. However, when I use them together, the submit function skips the validation and just submits the form...

What do I need to add for both events to be fired?

Thanks in advance for your help!
0
Comment
Question by:CreativeToyBox
  • 4
  • 3
8 Comments
 
LVL 12

Expert Comment

by:Sinoj Sebastian
ID: 20346540
use
<a href="#" onclick="document.askExpert.submit();return false;">
0
 

Author Comment

by:CreativeToyBox
ID: 20347238
I replaced ---> <a href="javascript:document.askExpert.submit();">
with this ---> <a href="#" onclick="document.askExpert.submit();return false;">

It still submits perfectly..  however, it skips the validation ---> onSubmit="return validateForm(this)"
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 20347245
Check this:
<form action="script.php" name="askExpert" onSubmit="return validateForm(this)" />
 
/-----Form Input fields-----/
 
<a href="#" onClick="document.askExpert.Submit.onclick();return false">
<img src="submitbutton.jpg" alt="Submit" border="0"></a>
<input type="submit" name="Submit" value="Submit" style="display:none;" >
</form>

Open in new window

0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

by:CreativeToyBox
ID: 20347556
I tried it and 'firebug' returned it as invalid:not a function

document.askExpert.Submit.onclick is not a function
onclick(click clientX=0, clientY=0)

I played around and tried various other things - and still no validation + submit.
0
 

Author Comment

by:CreativeToyBox
ID: 20348515
Ok, I solved part of the problem with this:

<a href="javascript:void(0);" onclick="validateForm(document.askExpert)">

However, I need to add a submit string to the function like this:

function validateForm(f) {
  // some stuff ...
  if (no_error)
    f.submit();
  else
    return false;
}

Only problem now is..  I am not sure how to make the submit string work. Where do I place this string, and what should the wording be?  'no_error' is not working at all.  Here is the simple validation script:

<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Jeff Harding (jbh@site-ations.com) -->
<!-- Web Site: http://www.site-ations.com -->
<!-- Modified by: Ronnie T. Moore, Editor -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->


var empty = new Image(); empty.src = "fieldempty.gif";
var email = new Image(); email.src = "emailerror.gif";
var zipcd = new Image(); zipcd.src = "ziperror.gif";
var phone = new Image(); phone.src = "phoneerror.gif";

var haveerrors = 0;
function showImage(imagename, imageurl, errors) {
document[imagename].src = imageurl;
if (!haveerrors && errors) haveerrors = errors;
}

function validateForm(f) {

haveerrors = 0;
(f.comments.value.length < 1)
? showImage("commentserror", "images/f/xmark.gif", true)
: showImage("commentserror", "images/f/checkmark.gif", false);

(f.firstName.value.length < 1) // validate first name length
? showImage("firstNameerror", "images/f/xmark.gif", true) // no semi-colon after this line!
: showImage("firstNameerror", "images/f/checkmark.gif", false); // true = errors, false = no errors

(f.lastName.value.length < 1) // validate last name length
? showImage("lastNameerror", "images/f/xmark.gif", true)
: showImage("lastNameerror", "images/f/checkmark.gif", false);

(f.phone.value.length < 1) // validate last name length
? showImage("phoneerror", "images/f/xmark.gif", true)
: showImage("phoneerror", "imagesf/checkmark.gif", false);

(f.email.value.search("@") == -1 || f.email.value.search("[.*]") == -1) // validate email
? showImage("emailerror", "images/f/xmark.gif", true)
: showImage("emailerror", "images/f/checkmark.gif", false);

return (!haveerrors);
}


// End -->
</script>
Edit/Delete Message
0
 
LVL 63

Accepted Solution

by:
Zvonko earned 250 total points
ID: 20348582
Check please this:
<form action="script.php" name="askExpert" onSubmit="return validateForm(this)" />
 
/-----Form Input fields-----/
 
<a href="#" onClick="document.askExpert.Submit.click();return false">
<img src="submitbutton.jpg" alt="Submit" border="0"></a>
<input type="submit" name="Submit" value="Submit" style="display:none;" >
</form>

Open in new window

0
 

Author Comment

by:CreativeToyBox
ID: 20348813
Wow, that works without the added mess!

Thanks!

You also have an easy way to use onBlur to validate the lines as my clients tab through the form?

(that way the checkmarks fire off as they work down the page)
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 20353968
You can get the input fields of a tab and call all onBlurs of that tab like this:

var elem = document.getElementById("tabID1").getElementsByTagName("input");
for(var i=0;i<elem.length;i++){
  elem[i].onblur();
}

0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I hope you'll find this tutorial useful and interesting. So let's try to extend Tcl with a new package.  For anyone more deeply interested please check out the book "Practical Programming in Tcl and Tk". It's really one of the best written books abo…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question