jquery mobile input formatting on required field change

Question

Here is the fiddle : http://jsfiddle.net/rbmako69/t5qKs/12/

here is the form:

<form id="form1" mrthod="get" action="#">
    <div date-role="fieldcontain" class="ui-hide-label">
        <label for="best_contact_method">Best Contact Method</label>
        <select data-theme="a" id="best_contact_method" name="best_contact_method" class="required" data-native-menu="false">
            <option>Best Contact Method</option>
            <option value="email">Email</option>
            <option value="daytime_phone">Daytime Phone</option>
            <option value="evening_phone">Evening Phone</option>
       </select>
    </div>
    <div data-role="fieldcontain" class="ui-hide-label">
        <label for="daytime_phone" id="daytime_phone_label">Daytime Phone</label>
        <input type="text" id="daytime_phone" name="daytime_phone" placeholder="Daytime Phone" />
    </div>
    <div data-role="fieldcontain" class="ui-hide-label">
        <label for="evening_phone" id="evening_phone_label">Evening Phone</label>
        <input type="text" id="evening_phone" name="evening_phone" placeholder="Evening Phone" />
    </div>
    <div data-role="fieldcontain" class="ui-hide-label">
        <label for="email" id="email_label">Email</label>
        <input type="text" id="email" name="email" placeholder="Email" />
    </div>
    <button type="submit" data-theme="a" name="submit" id="submit" value="validate">Validate</button>
</form>

The form has 4 elements, a select box, 3 text inputs, and a button. When you select an option from the select, it changes which field is required to submit the form. When you select on option from the drop down, you will see that the input fields changes its formatting. The validation works fine, but I can't seem to figure out how to keep the formatting of the field from changing.

Any suggestions?

score 6 · Accepted Answer · edited May 23 '17 at 10:25

You have some mistakes in your code, I will start with .ready which should not be used with jQuery Mobile; alternatively, use pageinit.

Secondly, use .addClass and .removeClass instead of using .attr('class', 'class'). Because using the last one removes all classes and adds only the ones specified, that's why input loses formatting/style.

Another important note, with jQuery Mobile, it's better to use $('.selector').on('event', function () in case of static elements and $(document).on('event', '.selector',function () if you want to bind events to dynamically added elements

Demo

Here's the new code.

$("#best_contact_method").on('change', function () {
 var item = $("select option:selected").val();
 switch (item) {
    case "email":
        $("#email").addClass("required email");
        $("#daytime_phone, #evening_phone").removeClass("required phoneUS");
        break;
    case "daytime_phone":
        $("#daytime_phone").addClass("required phoneUS");
        $("#email, #evening_phone").removeClass("required phoneUS email");
        break;
    case "evening_phone":
        $("#evening_phone").addClass("required phoneUS");
        $("#email, #daytime_phone").removeClass("required phoneUS email");
        break;
  }
 $("#form1").validate();
});

References:

Thanks for clearing all that up. What is the reason behind using `pageinit` as apposed to `.ready`? — Rob M, Jun 19 '13 at 18:11
@RobM welcome :) `.ready` fires once for the whole document, where `pageinit` fires once for each page. For more info, pls check this http://stackoverflow.com/a/14469041/1771795 i'll add it to my answer as well. — Omar, Jun 19 '13 at 18:14

jquery mobile input formatting on required field change

1 Answers1