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 TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Form validation help needed please... 1

Status
Not open for further replies.
Sheltered

Sheltered

Programmer
Nov 26, 2002
55
GB
Hi, i've been racking my brains all day with this, just when i thought i was getting somewhere i realised i'd done it wrong, arrgh! Note: i'm a bit of a noob when it comes to javascript.

Anyway all it is is a basic form which need validating, on the client side, against having some data in. I need to make sure that the first 5 boxes have data in and if they dont then i want the title to the left to change colour to red and just one pop up alert saying "Please fill in the boxes with red text".

The last three boxes dont have to have text in but if they are left blank i would like a default value to be assigned, ie. "field empty"

I managed to get the validation done but i could only get a pop up alert for the each empty field, i.e i got 5 fields popping up after each other.

The other thing, ahhhh...., is that when the form is submitted it submits to another page which loads automatically, which is all good when the fields are filled in correctly. However, what i need is when the validation script picks up an empty field then the page doesnt submit but stays on the form page and focuses on the first empty field with the propmt etc.

Am i asking too much here?? i'll post the form page below just in case it helps. any help would be greatly appreciated.

thanks very much
Pete
 
Sort by date Sort by votes
THE HTML:
<body bgcolor=&quot;#F0F0F0&quot;>
<form name=&quot;recon&quot; method=&quot;post&quot; action=&quot;recon.asp&quot;>
<tr>
<td class=&quot;head&quot; align=&quot;left&quot; width=&quot;180px&quot;><b>Server/URL Name:</b></td>
<td class=&quot;head&quot; align=&quot;left&quot;><input type=&quot;text&quot; name=&quot;servurl_name&quot; /></td>
</tr>
<tr>
<td class=&quot;head&quot; align=&quot;left&quot;><b>Date Removed:</b></td>
<td class=&quot;head&quot; align=&quot;left&quot;><input type=&quot;text&quot; name=&quot;rem_date&quot; /></td>
</tr>
<tr>
<td class=&quot;head&quot; align=&quot;left&quot;><b>Request By:</b></td>
<td class=&quot;head&quot; align=&quot;left&quot;><input type=&quot;text&quot; name=&quot;req_name&quot; /></td>
</tr>
<tr>
<td class=&quot;head&quot; align=&quot;left&quot;><b>SMART Reference:</b></td>
<td class=&quot;head&quot; align=&quot;left&quot;><input type=&quot;text&quot; name=&quot;smart_ref&quot; /></td>
</tr>
<tr>
<td class=&quot;head&quot; align=&quot;left&quot;><b>Reason For Removal:</b></td>
<td class=&quot;head&quot; align=&quot;left&quot;><textarea rows=&quot;5&quot; cols=&quot;30&quot; name=&quot;rem_reason&quot;></textarea></td>
</tr>
<tr>
<td class=&quot;head&quot; align=&quot;left&quot;><b>Last Chased:</b></td>
<td class=&quot;head&quot; align=&quot;left&quot;><input type=&quot;text&quot; name=&quot;chase_date&quot; /></td>
</tr>
<tr>
<td class=&quot;head&quot; align=&quot;left&quot;><b>Resolving Depts:</b></td>
<td class=&quot;head&quot; align=&quot;left&quot;><textarea rows=&quot;2&quot; cols=&quot;30&quot; name=&quot;res_dept&quot;></textarea></td>
</tr>
<tr>
<td class=&quot;head&quot; align=&quot;left&quot;><b>Estimate Fix Date:</b></td>
<td class=&quot;head&quot; align=&quot;left&quot;><input type=&quot;text&quot; name=&quot;est_fix_date&quot; /></td>
</tr>
<tr>
<td class=&quot;head&quot; align=&quot;left&quot;><b>Deployments Required?:</b></td>
<td class=&quot;head&quot; align=&quot;left&quot;><select name=&quot;deploy_req&quot;><option value=&quot;YES&quot; selected>Yes</option><option value=&quot;NO&quot;>No</option></select></td>
</tr>
<tr>
<td colspan=&quot;2&quot; align=&quot;right&quot;> <input type=&quot;submit&quot; value=&quot;Create New Entry&quot; name=&quot;button&quot;/> </td>
</tr>
</table>

<br />
<table width=&quot;550px&quot; style=&quot;border:solid 1px black; background-color:aliceblue; padding:3px;&quot;>
<tr>
<td class=&quot;head&quot; align=&quot;left&quot; width=&quot;180px&quot;><b>Remove Entry For Server:</b></td>
<td class=&quot;head&quot; align=&quot;left&quot;><input type=&quot;text&quot; name=&quot;Serverdel_Name&quot; /></td>
<td align=&quot;right&quot;><input type=&quot;submit&quot; value=&quot;Remove Entry&quot; name=&quot;button&quot; /></td>
</tr>
</table>
<hr width=&quot;550px&quot; align=&quot;left&quot; />
<br />
<span style=&quot;font-size:14px; font-weight:bold; color:navyblue&quot;>Add/Delete a new Server to 'Not-live' list.</span>

<table width=&quot;550px&quot; style=&quot;border:solid 1px black; background-color:aliceblue; padding:3px;&quot;>
<tr>
<td class=&quot;head&quot; align=&quot;left&quot; width=&quot;180px&quot;><b>Add server Namer:</b></td>
<td class=&quot;head&quot; align=&quot;left&quot;><input type=&quot;text&quot; name=&quot;Server_Name&quot; /></td>
<td align=&quot;right&quot;><input type=&quot;submit&quot; value=&quot;Add Server&quot; name=&quot;button&quot; /></td>
</tr>
<tr>
<td class=&quot;head&quot; align=&quot;left&quot; width=&quot;180px&quot;><b>Delete Server Name:</b></td>
<td class=&quot;head&quot; align=&quot;left&quot;><input type=&quot;text&quot; name=&quot;Server1_Name&quot; /></td>
<td align=&quot;right&quot;><input type=&quot;submit&quot; value=&quot;Delete Server&quot; name=&quot;button&quot; /></td>
</tr>
</table>
</form>
</body>
 
Upvote 0 Downvote
change your submit button same as below:

<input type=&quot;button&quot; value=&quot;Delete Server&quot; name=&quot;button&quot; onclick=&quot;ValidateFields();&quot;>

use javascript function to do validation:

function ValidateFields() {
var error = &quot;0&quot;;
if(document.forms[0].servurl_name.value==&quot;&quot;) {
error = &quot;1&quot;;
document.forms[0].servurl_name.focus();
} else if ()....
// put all of ur other validation here
} else {
// when everything is correctly filled up.
}

if(error==&quot;1&quot;) {
alert(&quot;Please fill in the boxes with red text&quot;);
}
}

 
Upvote 0 Downvote
<script>
function subForm(){
allOK = true
for (x=0; x<5; x++){
if (document.recon.elements[x].value == &quot;&quot;){
allOK = false
thisElem = document.getElementById(document.recon.elements[x].name)
thisElem.parentNode.previousSibling.style.color = &quot;red&quot;
}
else{
thisElem = document.getElementById(document.recon.elements[x].name)
thisElem.parentNode.previousSibling.style.color = &quot;black&quot;
}
}
if (! allOK){
alert(&quot;Please fill in the red fields first!&quot;)
}
else{
document.recon.submit()
}
}
</script>
<body bgcolor=&quot;#F0F0F0&quot;>
<form name=&quot;recon&quot; method=&quot;post&quot; action=&quot;recon.asp&quot;>
<table>
<tr>
<td class=&quot;head&quot; align=&quot;left&quot; width=&quot;180px&quot;><b>Server/URL Name:</b></td>
<td class=&quot;head&quot; align=&quot;left&quot;><input type=&quot;text&quot; name=&quot;servurl_name&quot; id=&quot;servurl_name&quot;></td>
</tr>
<tr>
<td class=&quot;head&quot; align=&quot;left&quot;><b>Date Removed:</b></td>
<td class=&quot;head&quot; align=&quot;left&quot;><input type=&quot;text&quot; name=&quot;rem_date&quot; id=&quot;rem_date&quot;></td>
</tr>
<tr>
<td class=&quot;head&quot; align=&quot;left&quot;><b>Request By:</b></td>
<td class=&quot;head&quot; align=&quot;left&quot;><input type=&quot;text&quot; name=&quot;req_name&quot; id=&quot;req_name&quot;></td>
</tr>
<tr>
<td class=&quot;head&quot; align=&quot;left&quot;><b>SMART Reference:</b></td>
<td class=&quot;head&quot; align=&quot;left&quot;><input type=&quot;text&quot; name=&quot;smart_ref&quot; id=&quot;smart_ref&quot;></td>
</tr>
<tr>
<td class=&quot;head&quot; align=&quot;left&quot;><b>Reason For Removal:</b></td>
<td class=&quot;head&quot; align=&quot;left&quot;><textarea rows=&quot;5&quot; cols=&quot;30&quot; name=&quot;rem_reason&quot; id=&quot;rem_reason&quot;></textarea></td>
</tr>
<tr>
<td class=&quot;head&quot; align=&quot;left&quot;><b>Last Chased:</b></td>
<td class=&quot;head&quot; align=&quot;left&quot;><input type=&quot;text&quot; name=&quot;chase_date&quot; /></td>
</tr>
<tr>
<td class=&quot;head&quot; align=&quot;left&quot;><b>Resolving Depts:</b></td>
<td class=&quot;head&quot; align=&quot;left&quot;><textarea rows=&quot;2&quot; cols=&quot;30&quot; name=&quot;res_dept&quot;></textarea></td>
</tr>
<tr>
<td class=&quot;head&quot; align=&quot;left&quot;><b>Estimate Fix Date:</b></td>
<td class=&quot;head&quot; align=&quot;left&quot;><input type=&quot;text&quot; name=&quot;est_fix_date&quot; /></td>
</tr>
<tr>
<td class=&quot;head&quot; align=&quot;left&quot;><b>Deployments Required?:</b></td>
<td class=&quot;head&quot; align=&quot;left&quot;><select name=&quot;deploy_req&quot;><option value=&quot;YES&quot; selected>Yes</option><option value=&quot;NO&quot;>No</option></select></td>
</tr>
<tr>
<td colspan=&quot;2&quot; align=&quot;right&quot;> <input type=&quot;button&quot; onClick=&quot;subForm()&quot; value=&quot;Create New Entry&quot; name=&quot;button&quot;/> </td>
</tr>
</table>

<br />
<table width=&quot;550px&quot; style=&quot;border:solid 1px black; background-color:aliceblue; padding:3px;&quot;>
<tr>
<td class=&quot;head&quot; align=&quot;left&quot; width=&quot;180px&quot;><b>Remove Entry For Server:</b></td>
<td class=&quot;head&quot; align=&quot;left&quot;><input type=&quot;text&quot; name=&quot;Serverdel_Name&quot; /></td>
<td align=&quot;right&quot;><input type=&quot;submit&quot; value=&quot;Remove Entry&quot; name=&quot;button&quot; /></td>
</tr>
</table>
<hr width=&quot;550px&quot; align=&quot;left&quot; />
<br />
<span style=&quot;font-size:14px; font-weight:bold; color:navyblue&quot;>Add/Delete a new Server to 'Not-live' list.</span>

<table width=&quot;550px&quot; style=&quot;border:solid 1px black; background-color:aliceblue; padding:3px;&quot;>
<tr>
<td class=&quot;head&quot; align=&quot;left&quot; width=&quot;180px&quot;><b>Add server Namer:</b></td>
<td class=&quot;head&quot; align=&quot;left&quot;><input type=&quot;text&quot; name=&quot;Server_Name&quot; /></td>
<td align=&quot;right&quot;><input type=&quot;submit&quot; value=&quot;Add Server&quot; name=&quot;button&quot; /></td>
</tr>
<tr>
<td class=&quot;head&quot; align=&quot;left&quot; width=&quot;180px&quot;><b>Delete Server Name:</b></td>
<td class=&quot;head&quot; align=&quot;left&quot;><input type=&quot;text&quot; name=&quot;Server1_Name&quot; /></td>
<td align=&quot;right&quot;><input type=&quot;button&quot; value=&quot;Delete Server&quot;name=&quot;button&quot; /></td>
</tr>
</table>
</form>
</body>





Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rich Cook
 
Upvote 0 Downvote
Whoohoo! Cheers so much guys it's working a treat. I'm now going to study what you did there so i should be able to do it myself in future.
Stars each a piece for you two [2thumbsup]

Thanks again

Pete
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

JPSeo
  • Locked
  • Question
--How to implement req.body.param validation
Replies
0
Views
218
JPSeo
JPSeo
Dara2020
  • Locked
  • Question
Jquery Conflict between Mega-Menu and MailChimp form
Replies
0
Views
225
Dara2020
Dara2020
rogerte
  • Locked
  • Question
Javascript updating form control not working
Replies
3
Views
439
rogerte
rogerte
tyutghf
  • Locked
  • Question
Konami code help 3
Replies
10
Views
612
tyutghf
tyutghf
Disskyz
  • Locked
  • Question
Need help with javascript date 1
Replies
4
Views
319
Smurfmania
Smurfmania

Part and Inventory Search

Sponsor

Back
Top