0

問題が発生している単純なログインページがあります。間違った情報を入力すると、アラートが実行されるだけですが、フィールドの背景に 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>
4

3 に答える 3

0

関数を少し変更して、フォームで実行します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-04T10:44:55.687 に答える