出現錯誤時添加CSS

我有一個簡單的登錄頁面，我遇到了一些麻煩。當你輸入不正確的信息時，它只是運行一個警報，但我希望它添加一些CSS到使它們變紅的字段的背景。我將如何去編輯下面的代碼來做到這一點？出現錯誤時添加CSS

謝謝。

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="styles.css" /> 
    <title>Jeremy Blaz&eacute;</title> 
</head> 
<body> 
    <div id="box"> 
     <img src="logo.png" /> 
     <form name="login"> 
      <input type="text" name="userid" placeholder="Username" /> 
      <input type="password" name="pswrd" placeholder="Password" /> 
      <input type="submit" class="button" onclick="check(this.form)" placeholder="Password" value="Sign in" /> 
     </form> 
    </div> 
    <script language="javascript"> 
    function check(form) { 
     if(form.userid.value == "username" && form.pswrd.value == "password") { 
      window.open('dashboard/index.html') 
     } 
     else { 
      alert("Error Password or Username") 
     } 
    } 
    </script> 
</body> 
</html>

來源

2013-05-04 Jeremy Blazé

這只是一個玩具例子或沒有您的應用程序真的有硬編碼到JS用戶名和密碼？ – 2013-05-04 10:26:18

@MartinSmith只是一個設計目的的例子：P – 2013-05-04 10:28:02

// js 
else { 
    alert("Error Password or Username"); 
    document.login.class = "error"; 
} 

// css 
form.error input[type="text"], form.error input[type="text"] { 
    background-color: red; 
}

來源

2013-05-04 10:25:59 phonicx

上的錯誤，你可以這樣做：

form.userid.className = "invalid";

CSS

.invalid 
{ 
    border-style:solid; 
    border-width:2px; 
    border-color:red; 
}

來源

2013-05-04 10:26:14

我會稍微改變您的功能和形式onsubmit運行：

function check(form) { 

    var valid = true; 

    if (form.userid.value !== 'username') { 
     form.userid.className = 'error'; 
     valid = false; 
    } 
    else { 
     form.userid.className = ''; 
    } 

    if (form.pswrd.value !== 'password') { 
     form.pswrd.className = 'error'; 
     valid = false; 
    } 
    else { 
     form.pswrd.className = ''; 
    } 

    if (valid) { 
     window.open('dashboard/index.html'); 
    } 

    return false; // return valid; if you want to submit the form once it's valid 
}

HTML：

<form name="login" onsubmit="return check(this)">

CSS：

#box input.error { 
    border: 1px darksalmon solid; 
    background: #f0dddd; 
}

演示：http://jsfiddle.net/JLrQB/1/

來源

2013-05-04 10:44:55 dfsq

出現錯誤時添加CSS

回答

相關問題