我需要使用ul li来选择选项，因为需要对它做一些样式，但不幸的是，我不能使用validate，因为不是输入元素。
这个表单是多表单，这里是我的代码的一部分
<form id="my-form" class="mwf-form" method="POST" action="">
<fieldset id="email-id">
<div class="row">
<div class="col-md-6">
<ul class="psa_form_area">
<li class="mwf-field">
<p>Please enter your e-mail address</p>
</li>
<li data-mwf-container="email-add" class="mwf-field">
<label class="mwf-label" for="email-add">
E-mail</label>
<span class="mwf-required">*</span>
<div class="mwf-input">
<input id="email-add" name="email-add" class="mwf-text line ptm " type="email">
</div>
</li>
</ul>
<ul>
<li data-mwf-container="next" class="mwf-button mwf-next">
<input type="button" value="Continue" id="next-button" data-mwf-id="next" class="next" name="next">
</li>
</ul>
</div>
</div>
</fieldset>
<fieldset id="personal_information">
<ul>
<li class="mwf-field">
<h3>Personal data</h3>
</li>
</ul>
<ul class="psa_form_area">
<div class="row">
<div class="col-md-6">
<li data-mwf-container="email-add" class="mwf-field">
<label class="mwf-label" for="email-add">
E-mail</label>
<div class="mwf-input">
<input id="email-add2" readonly="readonly" style="border:0" type="text">
</div>
</li>
</div>
</div>
<div class="row">
<div class="col-md-6">
<li data-mwf-container="country" class="mwf-field">
<label class="mwf-label" for="country">
Country
<span class="mwf-required">*</span>
</label>
<div class="dropdown mwf-input custom-select open" id="selectCountry">
<button id="mybtn" class="button-dropdown" type="button" data-toggle="dropdown" aria-expanded="true">
<span class="button-text selected">Select Country...</span>
</button>
<ul class="dropdown-menu option" role="menu" id="dropdown" name="country" required="" aria-required="true">
<li id="dropdw" class="dropdown-header">Select Country:</li>
<li id="1"><a href="#" btattached="true">Albania</a></li>
<li id="2"><a href="#" btattached="true">Austria</a></li>
<li id="3"><a href="#" btattached="true">Belgium</a></li>
<li id="4"><a href="#" btattached="true">Bosnia and Herzegovina</a></li>
<li id="5"><a href="#" btattached="true">Bulgaria</a></li>
<li id="6"><a href="#" btattached="true">Croatia</a></li>
</ul>
</div>
</li>
</div>
<div class="col-md-6">
<li data-mwf-container="lang" class="mwf-field">
<label class="mwf-label" for="lang">
Language
</label>
<span class="mwf-required">*</span>
<div class="dropdown mwf-input custom-select" id="selectLang">
<button id="mybtn" class="button-dropdown" type="button" data-toggle="dropdown">
<span class="button-text selected">Select Language...</span>
</button>
<ul class="dropdown-menu option" role="menu" id="dropdown">
<li id="dropdw" class="dropdown-header">Select Languange:</li>
<li id="1"><a href="#">German</a></li>
<li id="2"><a href="#">English</a></li>
<li id="3"><a href="#">Dutch</a></li>
</ul>
</div>
</li>
</div>
</div>
<div class="row">
<div class="col-md-6">
<li data-mwf-container="fname" class="mwf-field">
<label class="mwf-label" for="fname">
First name</label>
<div class="mwf-input">
<input id="fname" name="fname" class="mwf-text line ptm " type="text">
</div>
</li>
</div>
<div class="col-md-6">
<li data-mwf-container="lname" class="mwf-field ">
<label class="mwf-label" for="lname">
Last name</label>
<span class="mwf-required">*</span>
<div class="mwf-input">
<input id="lname" name="lname" class="mwf-text line ptm " type="text">
</div>
</li>
</div>
</div>
</ul>
<ul class="psa_form_area">
<li data-mwf-container="_cancel_EN5138" class="mwf-button mwf-reset">
<input type="reset" value="Reset"
data-mwf-submit="{"type":"cancel"}"
data-mwf-id="_cancel_EN5138" >
</li>
<li data-mwf-container="submit" class="mwf-button mwf-submit">
<input type="button" value="Submit" data-mwf-id="submit" class="submit" name="submit" >
</li>
</ul>
</fieldset>
</form>
<fieldset id="confirm">
<p>Thank you very much for your registration! An automatic e-mail response has been sent to {{email}}
</p>
</fieldset>
jQuery代码
$(".mwf-next, .mwf-submit").click(function(){
form.validate({
errorElement: 'span',
errorClass: 'help-block',
highlight: function(element, errorClass, validClass) {
$(element).closest('.mwf-field').addClass("has-error");
},
unhighlight: function(element, errorClass, validClass) {
$(element).closest('.mwf-field').removeClass("has-error");
},
errorPlacement: function(error, element) {
if (element.parent('.mwf-option').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
},
rules: {
'email-add': {
required: {
depends: function() {
$(this).val($.trim($(this).val()));
return true;
}
},
email: true
},
country: {
selectList: true,
required: true
},
lname: {
required: true
},
lang: {
required: true
}
},
messages: {
'email-add': {
required: "Please enter an email address",
email: "Please enter a valid email address"
},
country: {
required: "Please select country"
},
lname: {
required: "Last name required"
},
lang: {
required: "Languange required"
}
}
});
$('ul#dropdown').each(function() {
$(this).find('ul#dropdown').find('li').each(function() {
if ($(this).selected === "0") {
//alert("please select");
} else {
$(this).closest('.mwf-field').removeClass('has-error');
}
});
});
if ($("ul#dropdown li.selected").length > 0) {
var le = $('ul#dropdown li.selected');
//alert(le .length);
}
if (form.valid() === true) {
if ($('#email-id').is(":visible")) {
current_fs = $('#email-id');
next_fs = $('#personal_information');
} else if ($('#personal_information').is(":visible")) {
current_fs = $('#personal_information');
next_fs = $('#confirm');
}
next_fs.show();
current_fs.hide();
email1 = $('#email-add').val();
email2 = $('#email-add2').val(email1);
email2.css("font-weight", "Bold");
var template = "<p>Thank you very much for your registration An automatic e-mail response has been sent to <strong>" + email1 + " </strong></p>";
//var html = Mustache.to_html(template);
$('#confirm').html(template);
}
}); //end function validate
});
如何解决这个问题？任何替代方案？
这是我的完整代码：https://jsfiddle.net/jCos/7y7rj9eq/7/
抱歉，我不知道如何在jsfiddle中包含字体样式，因此选择列表似乎不正确。
提前致谢。
答案 0 :(得分：0)
您需要找到id的{{1}}，就像这样..
li
这会为您提供选定的$('#dropdown li.selected').attr('id');值，例如li，通过默认id提供给id="0"此<li id="dropdw" class="dropdown-header">Select Country:</li>，以便您可以查看或者你也可以查看li id。