我有一个类似
的HTML<div class='form-field-box even' id="one_field_box">
<div class='form-display-as-box' id="one_display_as_box">
one<span class='required'>*</span> :
</div>
<select id='one' name='one' data-placeholder="Select one" class="chzn-select" style="width:300px;" tabindex="4">
<option value='0'></option>
<option value='Corto' selected='selected' >Corto</option>
<option value='Largo' >Largo</option>
</select>
<div class="form-error"></div>
<div class='clear'></div>
</div>
我有一个剧本:
function validate(id, error) {
var obj = $('#' + id);
if(obj.val() == '0' || obj.val() == ''){
obj.parent().parent().find('.form-error').html(error);
return true;
}
return false;
}
我称之为此功能:
validate('one', "error in field one.");
我没有得到正确的导航,你能帮我正确验证validate()函数吗?
答案 0 :(得分:1)
您可以尝试获取正确的目标错误消息容器。 您需要使用任何事件处理程序触发validate()
方法。
我认为您需要在select
更改
$('select.chzn-select').on('change', function() {
validate( this.id, 'error in field '+ this.id +'.');
});
obj // select#one
.parent() // div.form-field-box
.find('.form-error') // error viewer
.html(error);
或者
obj // select#one
.next() // div.form-field-box
.find('.form-error') // error viewer
.html(error);
答案 1 :(得分:1)
确保在某些事件发生后调用validate()
,例如。 change
或submit
等......
请参阅小提琴:http://jsfiddle.net/amyamy86/9CC2b/
另外,使用===
进行严格比较:
if (obj.val() === '0' || obj.val() === '') {
要对一组元素进行验证,请在按钮上点击<select class="validateMe">
:
function validate(id, error) {
var obj = $('#' + id);
if (obj.val() === '0' || obj.val() === '') {
obj.parent().parent().find('.form-error').append('<p>' + error + '</p>');
return true;
}
return false;
}
$('#validate').click(function () {
$('.form-error').html(''); // clear existing errors
$('select.validateMe').each(function () {
var select = $(this);
var id = $(this).attr('id'); // get id of each select
validate(id, 'error in field ' + id);
});
});
答案 2 :(得分:1)
因为看起来你正在使用你的id的一些约定我只是构造表单id在该范围内找到它。
if(obj.val() === '0' || obj.val() === ''){
$("#" + id + "_field_box .form-error").html(error)
return true;
}
额外的好处是,如果您更改选择的位置,则不会破坏验证逻辑。
<强>更新强> 我还建议使用严格的平等
答案 3 :(得分:1)
由于您正在使用jquery,因此使用parent()方法,即使将来您计划在下拉列表中添加另一个包装器,也可以使用它。
function validate(id, error) {
var obj = $('#' + id);
if(obj.val() == '0' || obj.val() == ''){
$('.form-error',obj.parent('#one_field_box')).html(error);
return true;
}
return false;
}