Validate and Submit a Form Using JavaScript 1

[3dColor]

I do not want a visitor to submit a form on my site that does not have JavaScript enabled. In the following code the form submits just fine but my validation function does not run.

The Form:

<form name="addedit" action="crud_add_process.cfm" method="post" onSubmit="return validate_addedit();">

<input type="Text" name="address" value="#address#" size="40" maxlength="60" tabindex="1">

<a href="javascript:document.addedit.submit()"><img src="js-upload-photos.gif"></a>

</form>

External JS file

function validate_addedit() {
	// ck address
	if (document.addedit.address.value == "") {
		document.addedit.address.className = 'error';
		alert('Please enter an address for the rental.');
		document.addedit.address.focus();
		return false;} 
		else {document.addedit.address.className = null;}
	return true;
}

 

[southbeach]

How does it not work ...
I would start by making this change

function validate_addedit() {
    // ck address
    if (document.addedit.address.value == "") {
        document.addedit.address.className = 'error';
        alert('Please enter an address for the rental.');
        document.addedit.address.focus();
        return false;}
        else [COLOR=#ff0000]{document.addedit.address.className = null; return true;}
}[/color]

--
SouthBeach
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

 

[BillyRayPreachersSon]

I do not want a visitor to submit a form on my site that does not have JavaScript enabled.

Just out of interest, why not? If it's just so you don't have to perform any server-side validation, I'd say that's the wrong reason.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[3dColor]

I do have server side validation too.

Two reasons:
1. My site requires JS so if they can't get past the form then they can't use that part of the site anyway.
2. I hate bots and spiders getting into my form action pages.

 

[vicvirk]

instead of

<a href="javascript:document.addedit.submit()"><img src="js-upload-photos.gif"></a>

use

<input type="image" src="js-upload-photos.gif" />

That will fix it...

 

[3dColor]

vicvirk,

I did what you suggested however when I disabled JS in my browser the button still worked. I would like it to fail.

 

[southbeach]

I see you are using ColdFusion (long time since I used CFM). I found this links which uses PHP to detect if JS is enabled.

http://snippets.bluejon.co.uk/

Perhaps, if you look at the PHP code you could write CFM compatible to get the job done.


--
SouthBeach
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

 

[vicvirk]

try this

<form name="addedit" action="crud_add_process.cfm" method="post" onSubmit="return validate_addedit();">

<input type="Text" name="address" value="#address#" size="40" maxlength="60" tabindex="1">
<script>
 document.writeln("<input type=\"image\" src=\"js-upload-photos.gif\" />");
</script>
<noscript>
<br /> you must have javascript enabled to use this site
</noscript>
</form>

It will actually get rid of the submit button altogether if javascript is turned off. The <noscript></noscript> block will display for browsers that have js turned off...

 

[Foamcow]

Why don't you just set the display property of the form to "none" using CSS.

Then use Javascript to set the display property to "block".

That way, unless Javascript is enabled the form just won't exist on the page (it will be in the code but you should find this method works).

You might also want to show a message to non-Javascript users in place of the form explaining the situation.

Alternatively you could use document.write to put the form on the page but I think this is a bit "out there".


Question: what does your site do that requires Javascript? That's normally a "no-no" nowadays.

Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[southbeach]

I like last two posts ... They both address same principle, one gets rid of the submit object and the other of the entire form ... Both, effectively disable ability to submit the form.




--
SouthBeach
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

 

[3dColor]

vicvirk,

Thanks your idea worked great!

<script type="text/javascript">
	document.writeln("<input type='submit' value='Next: Upload Photos' class='greenbtn'/>")
</script>

The only thing I had to do was replace the " to a ' within the () to make it work. I hope I have it in the right format.

 

[BillyRayPreachersSon]

Getting rid of the form doesn't actually get rid of the form - it simply hides it. If you switch off styles with JS disabled, you'll still see it and be able to submit it.

Re. the submit button, some browsers might let you submit the form by pressing Enter, so I would not rely on that, either.

I would either:

1. Put a bogus action in, something like "/noJsFound", and overwrite that using JS, or

2. Deliver a hidden field to the page, initially with no value, and populate a known value using JS.

With option 1, if the form is submitted somehow without JS, then it will never reach your server-side controller.

With option 2, you can only accept the form data if the hidden field is set to that known variable.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[Foamcow]

Getting rid of the form doesn't actually get rid of the form - it simply hides it. If you switch off styles with JS disabled, you'll still see it and be able to submit it.

Good point. The document.write option makes more sense in that case.

Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.