/    Sign up×
Community /Pin to ProfileBookmark

Required Fields

Copy linkTweet thisAlerts:
Jul 14.2003

Hi,

I’m working on a form and when the user checks a checkbox (there are 4 different checkbox that could be checked), I need 2 input fields to be required per checkbox (there are 4 seminars that the user can attend and if they pick 1 or more, the 2 input fields…date & location would be rquired).

If that specific checkbox is NOT checked, then those 2 fields would not be required.

Is there a script that anyone has that will accomplish this for me.

Thank you in advanced.

Jason

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@Khalid_AliJul 14.2003 — you can use something along the lines...

if(document.formName.checkboxName.checked){

//validate that text fields are not empty...

}
Copy linkTweet thisAlerts:
@oleragJul 14.2003 — Here's some code that will, hopefully, help. Note that I've only completed the first series of checkbox/text fields - you can add other categories as you need.

I've added a feature that will clear/disable the text fields if the appropriate checkbox is de-selected. This is also accomplished at start-up, via the "setupPage()" function.

Finally, you may need to put some string validation code to ensure the correct text format (such as your "date" field(s) following the mandatory requirement text in the "submitForm()" function.

<html>

<head>

<SCRIPT Language = "JavaScript">

function setupPage() {

document.forms[0].checkCat1.checked = false;

document.forms[0].text1Cat1.value = "";

document.forms[0].text2Cat1.value = "";

document.forms[0].text1Cat1.disabled;

document.forms[0].text2Cat1.disabled;

}

function controlCat1(vCheck) {

if (!vCheck.checked) {

document.forms[0].text1Cat1.value = "";

document.forms[0].text2Cat1.value = "";

document.forms[0].text1Cat1.disabled = true;

document.forms[0].text2Cat1.disabled = true;

}

else {

document.forms[0].text1Cat1.disabled = false;

document.forms[0].text2Cat1.disabled = false;

}

}

function submitForm() {

if (document.forms[0].checkCat1.checked) {

if ((!document.forms[0].text1Cat1.value == "") &&

(!document.forms[0].text2Cat1.value == "")) {

alert("Submit after any value validation requirements: " +

document.forms[0].text1Cat1.value + " " +

document.forms[0].text2Cat1.value);

}

else {

alert("Fail: + Both "Category" fields must have values.");

}

}

else {

alert("Submit: No Category was selected.");

}

}

</SCRIPT>

</head>

<body onLoad="setupPage()">

<center>

<b>Checkbox validation</b>

</center>

<form>

<input type="checkbox" name="checkCat1" value="Y" onClick="controlCat1(this)"><b>Category 1</b>

<br>

Text A: <input type="text" name="text1Cat1" length="25" disabled>

Text B: <input type="text" name="text2Cat1" length="25" disabled>

<p>

<center>

<input type="button" name="submit" value="Submit" onClick="submitForm()">

</center>

</form>

</body>

</html>
Copy linkTweet thisAlerts:
@crvt75authorJul 14.2003 — Thank you very much [B]olerag[/B]...Just what I was looking for!

Jason
×

Success!

Help @crvt75 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 6.2,
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: @meenaratha,
tipped: article
amount: 1000 SATS,

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

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