语义 UI，将 class 更改为 JavaScript

Question

我有一个输入代码如下：

<div class="ui form">
<div id="wlsdom" class="ui icon input">
<input type="text" id="wlsname" name="wlsname" placeholder="WLS domain...">
<i class="disk outline icon"></i>
</div>
</div>  

<button onclick="validation();" class="ui  green button"><i class="eye icon">
</i>Show URL</button>

这里当我点击"show URL"按钮时，它的调用函数名为'validaion()'。所以在我的js文件中函数验证如下：

function validation()
{
if (document.getElementById('wlsname').value == '') 
{alert("Please enter domain name");
document.getElementById('wlsdom').classList.remove('ui icon input');
document.getElementById('wlsdom').classList.add('ui icon input error');
}

基本上我要做的是表单验证。如果字段为空，我想将输入元素的 class 从默认状态更改为错误状态。但不知何故脚本不起作用。或者我以错误的方式使用它。请帮我。谢谢！

Answer 1

您可以使用 element.classList += ' myClass' 添加 class

const wlsdom = document.getElementById('wlsdom');

function validation() {
  if (!wlsdom.value || wlsdom.value == '') {
    alert("Please enter domain name");
    wlsdom.classList += ' error';
  }else{
    wlsdom.classList -= ' error';
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet" />
<div class="ui form">
  <div id="wlsdom" class="ui icon input">
    <input type="text" id="wlsname" name="wlsname" placeholder="WLS domain...">
    <i class="disk outline icon"></i>
  </div>
</div>

<button onclick="validation();" class="ui  green button"><i class="eye icon">
</i>Show URL</button>

Answer 2

function validation()
{
    if (document.getElementById('wlsname').value == '') {
        alert("Please enter domain name");
        document.getElementById('wlsdom').classList.remove('ui icon input');
        document.getElementById('wlsdom').classList.add('ui icon input error');
}

你好像丢了一个'}'。

Answer 3

您只能使用 error class，而不是所有 classes 。并添加 else 语句 if is not empty 以删除错误 class。

function validation() {
  if (document.getElementById('wlsname').value == '') {
    alert("Please enter domain name");
    document.getElementById('wlsdom').classList.add('error');
  }
  else{
  document.getElementById('wlsdom').classList.remove('error');
  }
  }

.error{
border:1px solid red;

}

<div class="ui form">
  <div id="wlsdom" class="ui icon input">
    <input type="text" id="wlsname" name="wlsname" placeholder="WLS domain...">
    <i class="disk outline icon"></i>
  </div>
</div>

<button onclick="validation();" class="ui  green button"><i class="eye icon">
</i>Show URL</button>

Answer 4

classList.add() 函数不能在其参数中包含 space。如果要一次添加多个 class，请将它们用 , 符号分隔。在您的情况下，只需使用：

document.getElementById('wlsdom').classList.add('error');

并删除这一行：

document.getElementById('wlsdom').classList.remove('ui icon input');

查看 classList.add() 函数 here

语义 UI，将 class 更改为 JavaScript

Semantic UI, change class with JavaScript

javascript

validation

class

semantic-ui