/    Sign up×
Community /Pin to ProfileBookmark

Making fields mandatory in a form

Copy linkTweet thisAlerts:
Nov 24.2004

Hi,

I am a javascript beginner. I have problem making fields mandatory in the following form.

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1252″>
<title>Form submission</title>
</head>
<body>
<table id=”table9″ cellSpacing=”0″ cellPadding=”0″ width=”940″ border=”0″ valign=”TOP”>
<tr>
<td>
<form action=”” METHOD= POST>
<font size=+1 face=”arial”>Form Details</font>
<table BORDER=0 CELLSPACING=0 CELLPADDING=0 bgColor=”#cccccc” width=”782″ id=”table16″>
<tr>
<td ALIGN=LEFT width=”226″>Request Date:</td>
<td width=”215″><input NAME=”reqdate” size=”23″ MAXLENGTH=55></td>
<td width=”172″>Type:</td>
<td ALIGN=LEFT><select NAME=”type”>
<option value=”business” SELECTED>business</option>
<option value=”vacation”>vacation</option>
</td>

</tr>
<tr>
<td ALIGN=LEFT width=”226″>Group:</td>
<td width=”215″><select NAME=”group”>
<option value=”group1″ SELECTED>group1</option>
<option value=”group2″>group2</option>
</td>
<td ALIGN=LEFT>No. of People:</td>
<td><input NAME=”people” SIZE=9 MAXLENGTH=55 ></td>
</tr>
<tr>
<td ALIGN=LEFT width=”226″>Emp ID:</td>
<td width=”215″><input NAME=”empid” SIZE=25 MAXLENGTH=55 ></td>
<td ALIGN=LEFT>Emp Names:</td>
<td><input NAME=”empname” SIZE=17 MAXLENGTH=55 ></td>
</tr>
<tr>
<td ALIGN=LEFT width=”226″>Place Name:</td>
<td width=”215″><input NAME=”placename” SIZE=25 MAXLENGTH=55 ></td>
<td ALIGN=LEFT>Code Number:</td>
<td><input NAME=”codeno” SIZE=17 MAXLENGTH=55 ></td>
</tr>
<tr>
<td ALIGN=LEFT width=”226″>Target Date for Travel:</td>
<td width=”215″><input NAME=”targetdate” SIZE=25 MAXLENGTH=55 ></td>
<td ALIGN=LEFT>Duration:</td>
<td><input NAME=”duration” SIZE=17 MAXLENGTH=55 ></td>
<tr>
<td ALIGN=LEFT width=”226″> </td>
<td width=”215″> </td>
</tr>
</table>
<p><b>If business then provide the
details below.</b>
<br>
</p>
<table BORDER=0 CELLSPACING=0 CELLPADDING=0 bgColor=”#cccccc” id=”table17″ width=”779″ >
<tr>
<td ALIGN=LEFT width=”224″>Agency Name:</td>
<td width=”216″><input NAME=”agencyName” SIZE=23 MAXLENGTH=75 ></td>
</tr>
<tr>
<td ALIGN=LEFT width=”224″>Address:</td>
<td width=”216″><input NAME=”Address” SIZE=23 MAXLENGTH=100 ></td>
</tr>
<tr>
<td ALIGN=LEFT width=”224″>Contact Name:</td>
<td width=”216″><input NAME=”contactname” SIZE=23 MAXLENGTH=55 ></td>
<td ALIGN=LEFT width=”172″>Telephone No:</td>
<td width=”485″><input NAME=”teleno” SIZE=17 MAXLENGTH=30 ></td>
</tr>
<tr>
<td ALIGN=LEFT width=”224″>Email:</td>
<td width=”216″><input NAME=”email” SIZE=23 MAXLENGTH=55 ></td>
</tr>
</table>
<p>
<font face=”Times New Roman”><b>Justification</b> (for approval)</font></p>
</p>
<table BORDER=0 CELLSPACING=0 CELLPADDING=0 bgColor=”#cccccc” id=”table18″ width=”779″ >
<tr>
<td>
<textarea name=”justification” rows=5 wrap=virtual cols=74 default=”Null”></textarea></td>
</tr>
</table>
<p><b><span style=”font-size: 12.0pt; font-family: Times New Roman”>Financial Details
required</span></b></p>
<table BORDER=0 CELLSPACING=0 CELLPADDING=0 bgColor=”#cccccc” id=”table19″ width=”782″ >
<tr>
<td ALIGN=LEFT width=”226″>Travel type:</td>
<td width=”215″><select NAME=”traveltype”>
<option value=”home” SELECTED>Home</option>
<option value=”away”>Away</option>
</td>
<td ALIGN=LEFT width=”171″>Travel cost:</td>
<td width=”489″><input NAME=”cost” SIZE=17 MAXLENGTH=30 ></td>
</tr>
<tr>
<td ALIGN=LEFT width=”227″>Anticipated expenses:</td>
<td width=”213″><input NAME=”expenses” SIZE=23 MAXLENGTH=100 ></td>
</tr>
<tr>
<td ALIGN=LEFT width=”227″> </td>
<td width=”213″> </td>
</tr>
</table>
<p class=”MsoNormal”><b>Approvals obtained to-date </b></p>
<table BORDER=0 CELLSPACING=0 CELLPADDING=0 bgColor=”#cccccc” id=”table20″ width=”780″ >
<tr>
<td ALIGN=LEFT width=”222″>CM approval (enter name):</td>
<td width=”219″><input NAME=”cmname” SIZE=23 MAXLENGTH=75 ></td>
<td ALIGN=LEFT width=”173″>DM approval (enter name):</td>
<td width=”505″><input NAME=”dmname” SIZE=17 MAXLENGTH=30 ></td>
</tr>
<tr>
<td ALIGN=LEFT width=”222″> </td>
<td width=”219″> </td>
</tr>
<tr>
<td ALIGN=LEFT width=”222″> </td>
<td width=”219″> </td>
</tr>
<tr>
<td ALIGN=LEFT width=”222″> </td>
<td width=”219″> <input type=submit value=Submit> <INPUT type=reset value=”Clear Form”></td>
</tr>
</table>
</form></td>
</tr>
</table>
</body>
</html>

In the above form, ‘Request date’ is mandatory.

If ‘Business’ is selected in the field ‘Type’, then ‘Travel cost’, ‘Anticipated expenses’ are mandatory. If ‘Vacation’ is selected, ‘Travel Cost’, ‘Anticipated expenses’ are optional.

‘Empid’ is mandatory and should have same no. of entries as ‘No of People’.

If ‘group1’ is selected in category ‘Group’, ‘Agency Name’, ‘Address’, ‘Telephone no’ are mandatory.

‘Travel type’, ‘CM approval’ and ‘DM approval’ are mandaory. Textarea ‘Justification’ is also mandatory.

Could anyone help me in making this work please!

Thanks

Bhavya

to post a comment
JavaScript

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@7studNov 24.2004 — I don't see a single line of javascript anywhere? ?

You need an onsubmit event handler for the form element, and then when the user clicks the submit button, your function needs to check whether the mandatory fields were selected. If not, then put the focus() on the offending field.

If that sounds like Greek to you, get a beginning javascript book and start reading.
Copy linkTweet thisAlerts:
@Warren86Nov 24.2004 — <HTML>

<Head>

<Script Language=JavaScript>

function setMandatory(inList,outList){

if (inList.value == 'Y'){outList.isMandatory = true}
if (inList.value == 'N'){outList.isMandatory = false}
outList.selectedIndex = 0;
}

function validate(isList){

if (List1.value == 0){alert("You must choose from List 1")}
else {
if (isList.isMandatory == true && isList.value == 0){alert("You must choose from List 2")}
}
}

</Script>

</Head>

<Body>

<center>

<h4>Mandatory Select List</h4>

<select name='List1' onchange="setMandatory(List1,List2)">

<option selected value=0>Make a selection</option>

<option value='Y'>Yes</option>

<option value='N'>No </option>

</select>

<br><br>

<select name='List2' isMandatory=false>

<option selected value=0>Make a selection</option>

<option value=1>1st</option>

<option value=2>2nd</option>

<option value=3>3rd</option>

</select>

<br><br>

<input type=button value="Submit" onclick="validate(List2)">

</Body>

</center>

</HTML>
Copy linkTweet thisAlerts:
@KorNov 24.2004 — Warren86, wouldn't be better to use onsubmit event instead of onclick? The problem is that a return false will cancel [b]only[/b] the action associated to the tag which nested the event handler, not others. Or the submit button has an [b]included[/b] action, not an explicit one. The [b]form[/b] has an action to do not the [b]button[/b], thus the return false should act upon the FORM tag, I reckon...


function validate(f){

if(codition negative){

alert();

element.focus()

return false

}

}

...

<form action="" method ="" onsubmit="return validate(this)">

...

<input type="submit" value="Submit">

</form>

If tried with a form nested element you would have noticed that.
Copy linkTweet thisAlerts:
@Warren86Nov 24.2004 — ...
Copy linkTweet thisAlerts:
@KorNov 24.2004 — My previous note for you was extremely polite, considering the fact that your code was wrong. I don't see why you feel so offended. The thread you was talking about was none of your business, unless you have something interesting to comment on [b]that[/b] thread.
Copy linkTweet thisAlerts:
@Warren86Nov 24.2004 — ...
Copy linkTweet thisAlerts:
@KorNov 24.2004 — I have nothing special against noone, you are too new around to have had time to notice that. My little quarell with Charles is old enough, and if we both don't consider it a real fight, I don't see the reason for [b]you[/b] to interfere in [b]that[/b]. Unless, I repeat, you have something really interesting to comment [b]there[/b]. Considering the wrong solution you gave here, I doubt that you might be able to...?
Copy linkTweet thisAlerts:
@7studNov 24.2004 — Very unprofessional Kor: could you please include links to [B]that[/B] and [B]there[/B].

Thank you.
Copy linkTweet thisAlerts:
@KorNov 25.2004 — a, it doesn't really matter. If Warren86 wouldn't have deleted his own messages you could have seen what was all about, but he was coward enough to quit the argue... ?

Nothing interesting, I assure you...
×

Success!

Help @Bhavya 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.25,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

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