Forum Moderators: open
I have a comments form on my site on which I have used JavaScript to ensure all fields are filled in before the form is submitted. This works on a basic level, but I am unable to apply my CSS formatting to the resulting error messages, or indeed to change the backgound colour to that of the form.
Is there any way to do this? Or is this as far as this script can go?
Here is the Javascript code that I have written;
<script type="text/javascript">
<!--
function validate()
{
x=document.comments
at=x.email.value.indexOf("@")
name=x.name.value
comment=x.comment.value
submitOK="True"
if (name.length < 1)
{
document.write("<p>Sorry, you must enter your name to send the form.</p><br />")
submitOK="False"
}
if (at==-1)
{
document.write("<p>Sorry, you must enter a valid e-mail address to send the form.</p><br />")
submitOK="False"
}
if (comment.length < 1)
{
document.write("<p>Sorry, you must enter your comments to send the form.</p>")
submitOK="False"
}
if (submitOK=="False")
{
return false
}
}
-->
</script>
and the form code;
<form name="comments" action="contactform.php" method="post" onsubmit="return validate()">
<div style="position: absolute; left: 0px; top: 50px; background-color: #ff0066; width: 133px; height: 214px; text-align: right; ">
<p class="subject">* Name</p><br />
<p class="subject">* E-Mail</p></br>
<p class="subject">* Comments</p><br /><br /></br>
<p><b>Note:</b> fields marked <b>*</b> are required.</p>
</div>
<div style="position: absolute; left: 144px; top: 50px; background-color: #ff0066; width: 282px; height: 214px; text-align: left; ">
<p class="inputtext"><input type="text" name="name" size="30"></p><br />
<p class="inputtext"><input type="text" name="email" size="30"></p><br />
<p class="inputtext"><textarea rows="5" cols="30" name="comment"></textarea></br>
<input type="submit" value="send">
<input type="reset" value="reset">
</p>
</div>
</form>
cheers.
Say you have an empty DIV with the ID 'errorbox', positioned wherever you want it (and your users can see it):
<div id="errorbox" style="font-weight: bold; color: red"></div>
In your script, change the lines like
document.write("<p>Sorry, you must enter your name to send the form.</p><br />")
into
document.getElementById('errorbox').innerHTML += "<p>Sorry, you must enter your name to send the form.</p><br />";
HTH.
Is this possible?
At the moment I have a bit of text after the error messages that tells users to refresh their browser to see the form again. I'd like to have a text link to do that too, but when I put it into this code
document.getElementById('error').innerHTML +="<p><b>..........................................................................................................</b><br /><br />Please use your browser's refresh button to return to the contact form.</p><br />";
error.style.visibility="visible";
return false
it doesnt seem to work.
I agree that I should have something in my php file to validate this as well, but at the moment I dont know enough about php to implement this.
thanks again for your help. I'm new to this (as you can probably tell) and I greatly appreciate it.
document.getElementById('error').innerHTML += 'Please enter your name. <a href="#name" onClick="document.getElementById(\"error\").style.display=\"none\"">Click here to return<\/a>"';
The downside of your method is that when the user returns to the form, he or she may have forgotten what the error message was - especially if there was more than one error. If I were you, I'd simply display the error message(s) at the top of the form. But on the other hand there may be arguments that I don't know of.
I guess I was editing my previous posting while you were replying to that one. Sorry for the mess...
