How to make a Form Field Mandatory using a Condition

SylviaD · May 7, 2008

Is it possible to make a form field mandatory based on a condition. I have an on-line form and want to make a field called Reason mandatory if the answer to the previous field "Connection Required? is Yes (or True).

I'm not much good with coding but can work my way through it if someone can point me in the right direction.

I would be most grateful if someone could offer guidance on this and some clue as to how and where to do it.

Many thanks.

BabyJeffy · May 7, 2008

First of all, you need to support this constraint at the server-level. This is something that you can probably deal with.

Secondly, you might employ some javascript to enforce it on the client-side (but since a visitor may not have javascript enabled, the server-level constraint will handle the ill-formed data).

Here is a complete test page that uses javascript to show another form field when a certain constraint is met (in this case the drop down with value="99"). The form also does some validation and checks that the required field is filled out (if the constraint is in force).

Code:

<html><head><title>Constraint Fun</title>

<script type="text/javascript">
function checkConstraint(passedValue) {
  if (passedValue == "99") {
    document.getElementById('cntinsConstraintWrapper').style.display = 'block';
  } else {
    document.getElementById('cntinsConstraintWrapper').style.display = 'none';
  }
}
function validateForm() {
  var msg = '';
  var isFormValid = false;
  if (document.getElementById('cnt').selectedIndex == 0) {
    msg += ' - you must select how high you are going to count to\n';
  }
  if (document.getElementById('cnt').value == '99' && document.getElementById('ins').value == '') {
    msg += ' - you must supply your insurance company if you plan to count to 99\n';
    document.getElementById('cntinsConstraintWrapper').style.display = 'block';
  }
  if (msg == '') {
    isFormValid = true;
  } else {
    alert('The form could not be submitted due to:\n' + msg);
  }
  return isFormValid;
}
</script>

</head><body>
<p>Choose how high you want to count to...</p>
<form method="post" action="" onsubmit="return validateForm()">
<select name="cnt" id="cnt" onchange="checkConstraint(this.value)">
  <option value="">Select from the following list...</option>
  <option value="11">Count to 11</option>
  <option value="18">Count to 18</option>
  <option value="99">Count to 99 (requires insurance)</option>
</select>
<div id="cntinsConstraintWrapper" style="display: none;">
  <label for="ins">Insurance company: </label>
  <input type="text" name="ins" id="ins" value="">
</div>
<input type="submit" value="Send my pledge">
</form>
</body></html>

Let us know how you fare, and if you have any questions about the code I've posted.
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

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!

How to make a Form Field Mandatory using a Condition

SylviaD

Technical User

BabyJeffy

Programmer

Similar threads

Part and Inventory Search

Sponsor