I am trying to create a form which changes it's required fields dynamically based on a part radio selection. 

So a person chooses which way they want to be contacted in the radio:

```
<label><input type="radio" name="contactPref" id="SMS" value="SMS"/>SMS</label>
<label><input type="radio" name="contactPref" id="Twitter" value="Twitter" />Twitter</label>

<label for="phone">Phone Number:</label>
<input type="tel" name="phone" id="phone"/>
<label for="twitterName">Twitter:</label>
<input type="text" name="twitterName" id="twitterName"/>

```

And depending on what they decide is their preferred mode of contact. After a field becomes selected, the corresponding text box should be made a required field. For example: if SMS radio field becomes selected then the Phone Number text box must be filled while the other fields becomes optional to fill. If a person chooses the Twitter radio, then the Twitter Name text box becomes a required field.

Here is my jsfiddle [jsfiddle.net/lordro/q7Cxs](http://jsfiddle.net/lordro/q7Cxs)

My key issue is calling up the element and attribute as well as the syntax for it.

Thanks in advance!