セマンティックUIは、JavaScript

Question

変化クラスは、私は以下のように入力コードを持っています。したがって、私の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'); 
} 

したがって、私がやってみようとしているのはフォーム検証です。フィールドが空の場合、入力要素のクラスをデフォルトからエラー状態に変更したいと考えています。しかし、何らかの形でスクリプトが動作していません。または私は間違った方法でそれを使用しています。私を助けてください。ありがとう！あなたは

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 1

classList.add()関数は引数にスペースを含めることはできません。一度に複数のクラスを追加する場合は、,シンボルで区切ります。あなたのケースでは、単に使用：

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

と、この行を削除します。

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

を参照してくださいclassList.addについて（）関数をhere

Answer 2

uが '}' を失ったようです。

Answer 3

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'); 
} 

クラスを追加するelement.classList += ' myClass'を使用することができます

Answer 4

すべてのクラスではなく、errorクラスのみを使用できます。エラー・クラスを削除するにはelse文if is not emptyを追加します。

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>