Change input class of textbox onchange dropdown List

Question

I have a problem on how to change the input class of the CheckBox when the Dropdown List data changed.

This is my html markup :

           <p>
            <label for="ddlContType">
                Contact Type</label>
            <span>
                @Html.DropDownList("ddlContType", new SelectList(ViewBag.ContTypeList, "ID", "Display_Value",ContType), "[Please Select]",
            new Dictionary<string, object>
            {
                {"class","validate[required] inputLong"}
            })
            </span>
        </p>
        <p>
            <label for="txtContValue">
                Contact Value</label>
            <span>
                <input type="text" id="txtContValue" name="txtContValue" class="validate[required] inputLong"
                    value="" />`

Because I have used the validate of jquery

I have Email and Phone Number on my DropDownList

I want to validate when I select the Email in my Dropdown List , it will allow an Email Format Text box and When I select the Phone number on my Dropdown..

It will only allow Phone Format This is the class I am using

class="validate[required,custom[email]]

and

class="validate[required,custom[phone]]

Answer 1

If you want to change a class when the drop-down list is changed, then just add a listener for the "change" event. The handler should update the class as needed:

$("#ddlContType").on("change", function(ddl) {
    var textEl = $("txtContValue");
    if ($(ddl).val() == "Email") {
        txtEl.attr("class", "validate[required,custom[email]]");
    } else {
        txtEl.attr("class", "validate[required,custom[phone]]");
    }
});

Answer 2

I'm not sure what the output looks like of your drop down list. Let me assume it looks something like this:

<select id="ddlContType" name="ddlContType">
     <option value="">-- Select --</option>
     <option value="1">E-mail</option>
     <option value="2">Phone Number</option>
</select>

To be able to detect a change you need to add a listener to changes on your drop down's selection. I use jQuery because I am familiar with it. You can use whatever JavaScript framework you feel familiar with (or just plain JavaScript).

$(document).ready(function () {
     $('#ddlContType').change(function () {
          // This will bring back either a 1 or a 2
          var commType = $('#ddlContType').val();
          // Just to confirm
          alert('commType = ' + commType);

          // Get a reference to the textbox
          var txtContValue = $('txtContValue');

          if (commType == '1') {
               txtContValue.attr('class', 'validate[required,custom[email]]');
          }
          else if (commType == '2') {
               txtContValue.attr('class', 'validate[required,custom[phone]]');
          }
     });
});

I'll be honest, I have never seen something like this:

class="validate[required,custom[email]]

Play around with my code and see what works for you. There are many example on the jQuery API website.