验证选择字段取决于id jquery

validate select field depending on id jquery

本文关键字：id jquery 取决于 字段 选择 验证      更新时间：2023-09-26

我有一个类似

的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()函数吗

因为它看起来像你使用了一些约定与你的id的我将只是构造形式id找到它在该范围内

if(obj.val() === '0' || obj.val() === ''){
    $("#" + id + "_field_box .form-error").html(error)
    return true;
}
额外的好处是，如果你改变你的选择的位置，你不会破坏验证逻辑。

我还建议使用严格相等

由于您使用的是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;
}

您可以尝试获取正确的目标错误消息容器。您需要使用任何事件处理程序来触发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);

确保您在某些事件后调用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);
    });
});
相关文章：