这是小提琴:http://jsfiddle.net/rbmako69/t5qKs/12/
形式如下:
<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>
该表单具有4个元素,一个选择框,3个文本输入和一个按钮。当您从选择中选择一个选项时,它将更改提交表单所需的字段。当从下拉菜单中选择on选项时,您会看到输入字段更改了其格式。验证工作正常,但我似乎无法弄清楚如何保持字段格式不变。
有什么建议么?
最佳答案
您的代码中有一些错误,我将从.ready
开头,不应将其与jQuery Mobile一起使用;或者,使用pageinit
。
其次,使用.addClass
和.removeClass
而不是使用.attr('class', 'class')
。因为使用最后一个会删除所有类并仅添加指定的类,所以输入会丢失格式/样式。
另一个重要说明是,使用jQuery Mobile时,最好在静态元素的情况下使用$('.selector').on('event', function ()
;如果要将事件绑定到动态添加的元素,则最好使用$(document).on('event', '.selector',function ()
Demo
这是新代码。
$("#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();
});
参考文献:
Why
.ready
shouldn't be used with jQuery Mobile?jQuery Mobile events
.addClass
和.removeClass