/    Sign up×
Community /Pin to ProfileBookmark

Validate required fields all at once

Copy linkTweet thisAlerts:
Oct 19.2004

First… I am not uploading my script because it is long and complex and I don’t think it will help anyway. My validation works fine I just hate it. I use the same ole boring method I always have (annoying alerts… one at a time).

I’m am searching (with no luck) for a sample script showing how to validate a form in a specific way.

I want to have a few required fields on each form, once the user clicks on Submit, if these fields have not been filled in they should not get an alert, rather they should see the field names highlighted in red(or whatever) and a little message at the top/bottom of the form letting them know they forgot to fill in some required fields.

The part I’m having the most trouble with is how to have the errors returned all at once. The user should only have to click on Submit once to be shown 6 different errors, not fix one and then submit only to find there is another… and another… etc.

You get my point.

Anyway… if anyone knows of a sample I could look at and figure out how it works I would be most appreciative.

Thanks!
-peacefroggie

ps – sorry if the answer to this has already been posted, I went through 30 pages of posts and didn’t find what I was looking for (lots of other goodies though!)

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@ranji1323Oct 19.2004 — 1) place span tags around your labels for required fields.

2) on the OnSubmit function create an array of errors. When a field is invalid, store it in the array.

3) At the end of onsubmit have a case statment looking for the errors and use innerHTML of the corresponding span tags to make the text red.
Copy linkTweet thisAlerts:
@peacefroggieauthorOct 19.2004 — Thanks!!! but that's a little bit over my head... I'm no guru, but I'm pretty swift at interpreting/modifying scripts if I can see the example.

Thanks again for your input...
Copy linkTweet thisAlerts:
@ranji1323Oct 19.2004 — I'm no guru either but this works and is straight forward. If you need clarification just let me know.

Unfortunately, I'm at work and don't have any non-propriatary code to show but I'll type up something quick and maybe it will make sense.

1) On your form you have fields as such:

<TD class="text">

<SPAN ID="SContactName">

Your Name (required):

</SPAN>

</TD>

<td>

<INPUT TYPE="text" NAME="ContactName" SIZE="40" MAXLENGTH="40">&nbsp;

</td>


2) Your form tag could have <form action="whatever.asp" onsubmit="Javascript: return SubmitForm(this);"

3) in the onsubmit function SubmitForm you can have the following:

if (ContactName == "")

{

SContactName.innerHTML = "<B><FONT COLOR=Red>Your Name</FONT></B>";

}
Copy linkTweet thisAlerts:
@javaNoobieOct 20.2004 — You should try using css instead of using innerHTML.
<i>
</i>&lt;style type="text/css"&gt;
.error{
color: #FF0000;
font-weight:bold;
}
&lt;/style&gt;

document.getElementById('&lt;correspondingSpanId&gt;').className = (someField.value=="")?'error':'';
Copy linkTweet thisAlerts:
@peacefroggieauthorOct 20.2004 — thanks ranji1323 and javanoobie... I still don't have it working but I have some ideas to work off of nonetheless...

loving this forum,

peacefroggie
Copy linkTweet thisAlerts:
@ranji1323Oct 20.2004 — Peacefroggie,

javanoobie has the best way to do it. I tried to give a more simplified way because you mentioned you were new to this. CSS is always better for maintenance and the like
×

Success!

Help @peacefroggie spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...