語義UI，改類的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> 

這裏當我點擊「顯示網址」按鈕，它的命名調用函數「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'); 
} 

所以基本上我想要做的是形式驗證。如果字段爲空，我想將輸入元素的類從默認狀態更改爲錯誤狀態。但不知怎的，腳本不工作。或者我是以錯誤的方式使用它。請幫幫我。謝謝！

Answer 1

的classList.add()功能可以不包括它的參數空間。如果您想一次添加多個課程，請使用,符號將它們分開。在你的情況下，只需使用：

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

並刪除這一行：

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

查看關於classList.add（）函數here

Answer 2

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

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

似乎ü失去了一個 '}'。

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>