Question

我有一个表格，我需要多选。为此，我使用Select2。问题是：在这种形式下，我的所有字段都是必需的，当字段为空时，我通过显示星号通知我的用户。但是，Select2完全忽略了创建的选择中存在必需属性的事实。

所以我的问题是：如何在select2下拉列表中显示星号图像？最好用我用于其他输入的相同方法？

编辑：我已经处理了验证部分。我的问题纯粹是告知用户需要哪些字段。

示例表格

HTML

<input type="text" name="name" id="name" value="" placeholder="" maxlength="255" style="width: 300px" required="required"/>
<input type="text" name="label" id="label" value="" maxlength="8" style="width: 150px" required="required"/>
<?php
echo form_multiselect('client_types[]', $client_types, set_array('client_types', null), 'class="select2" style="width: 315px;" required="required"');
?>

CSS

input:required, textarea:required {
    background: #fff url(../images/red_asterisk.png) no-repeat 98% center;
}

.required_notification {
    color:#d45252;
    margin:5px 0 0 0;
    font-size: 12px;
    font-weight: bold;
}

input:required:valid, textarea:required:valid {
    background: #fff url(../images/valid.png) no-repeat 98% center;
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}
input:focus:invalid, textarea:focus:invalid {
    background: #fff url(../images/invalid.png) no-repeat 98% center;
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
}

Answer 1

你可以做三件事：

1）在选择2中创建规则并复制多个规则。该规则在该位置添加了小x，因此您可以替换为星号而不是您的星号。这很可能是三个选项中最不可取的，所以我不会详细说明。

2）您可以在select2容器上使用CSS，如：

<? // findfiles.php  -  what is in directory "videoarchive"
$dir    = 'images/videoarchive/'; // path from top
$files = scandir($dir);
$files_n = count($files);

echo '<br>There are '.$files_n.' records in directory '.$dir.'<br>' ;

$i=0;
while($i<=$files_n){
    // "is_dir" only works from top directory, so append the $dir before the file
    if (is_dir($dir.'/'.$files[$i])){   
        $MyFileType[$i] = "D" ; // D for Directory
    } else{
        $MyFileType[$i] = "F" ; // F for File
    }
    // print itemNo, itemType(D/F) and itemname
    echo '<br>'.$i.'. '. $MyFileType[$i].'. ' .$files[$i] ;
    $i++;
}
?>

不是确切的代码，但你得到我的漂移。如果这是针对特定字段的，您可能需要在该字段中添加一个类并在CSS中反映该类，或者在您的选择和目标周围添加一个包装元素。

3）如果兼容性是一个问题，你总是可以使用jQuery。

select2-container:after {
  content: "*";
  display: block;
  position: absolute;
  right: 10px;
  top: 5px;
  color: red;
}
select2-container { position: relative; }

再次使用选择器获取所需的确切元素，并为星号范围添加CSS。

我对select2知之甚少，所以如果在init中有一个选项可以添加一个必要的指标，这将成为你最好的指标，那么我会开始在那里研究，看看是否这是开箱即用的东西，如果没有，那么你可以尝试上述选项之一。

Answer 2

我有同样的问题。我找到了2个可接受的（对我而言）解决方案。

使用ajax验证字段是否未设置\设置不正确。
使用简单的JavaScript验证输入中是否有任何信息。

单击按钮（提交）或从输入更改焦点后可以执行此操作。

如何在select2下拉列表中显示星号（表示需要字段）？

2 个答案: