0
私のフォームの1つを検証していますが、空であればそれがなくなり、境界線が赤に変わります。 bordercolorは同じままです。それが元の状態に戻ります正しく提出したらどこでそれを作るにはどうすればよい送信後にjavascriptで色を元に戻します
function convert() {
\t var dAmount, currency, total, err = "";
\t dAmount = document.getElementById('dAmount').value;
\t currency = document.getElementById('Currency').value;
\t if (isNaN(dAmount)) {
\t \t err += 'Enter a valid number!<br />';
\t \t document.getElementById('dAmount').style.borderColor = "red";
\t }
\t if (dAmount == '') {
\t \t err += 'Amount Missing!<br />'
\t \t document.getElementById('dAmount').style.borderColor = "red";
\t }
\t if (currency == 'Choose') {
\t \t err += 'Please Select a currency!<br />';
\t \t document.getElementById('Currency').style.borderColor = "red";
\t \t return false;
\t } else {
\t \t document.getElementById('Choose').style.borderColor = 'gray';
\t }
\t if (err.length > 0) {
\t \t document.getElementById('error').style.display = 'block';
\t \t document.getElementById('error').innerHTML = err;
\t \t return false;
\t } else {
\t \t document.getElementById('error').style.display = 'none';
\t }
}\t #wrapper {
\t \t width: 600px;
\t \t text-align: center;
\t \t margin: 250px auto 0;
\t }
\t body {
\t }
\t form {
\t \t width: 580px;
\t \t padding: 10px;
\t }
\t label {
\t \t float: left;
\t \t width: 150px;
\t \t display: block;
\t \t clear: left;
\t \t text-align: right;
\t \t padding-right: 10px;
\t \t margin-top: 15px;
\t }
\t input, select, span {
\t \t margin-top: 15px;
\t \t display: block;
\t }
\t input[type="button"] {
\t \t float: right;
\t }
\t #error {
\t \t border: 2px solid red;
\t \t padding: 25px;
\t \t text-align: center;
\t \t font-size: 24px;
\t \t font-weight: bold;
\t \t display: none;
\t }<!DOCTYPE html>
<html lang="en">
<head>
\t <meta charset="UTF-8">
\t <title>Final Exam</title>
\t <link rel="stylesheet" href="converter.css">
\t <script src="converter.js"></script>
</head>
<body>
\t <div id="wrapper">
\t \t <h1> Currency Converter</h1>
\t \t <div id="error"></div>
\t \t <form id="CForm">
\t \t \t <label for="dAmount">Dollar Amount: </label>
\t \t \t <input type="text" id="dAmount" name="dAmount" /> <br />
\t \t \t <label for="Currency"> Currency: </label>
\t \t \t <select id="Currency" name="Currency">
\t \t \t \t <option value="Choose">Select One</option>
\t \t \t \t <option value="British Pound"> British Pound </option>
\t \t \t \t <option value="Mexican Peso"> Mexican Peso </option>
\t \t \t \t <option value="Euro"> Euro </option>
\t \t \t \t <option value="Japanese Yen"> Japanese Yen </option>
\t \t \t </select>
\t \t \t <br />
\t \t \t <label for="Total"> Amount</label>
\t \t \t <span id="Total"></span>
\t \t \t <br />
\t \t \t <input type="button" value="Convert" onclick="convert()" />
\t \t \t <input type="reset" \t value="Clear" id="bReset"/>
\t \t \t </form>
\t </div>
</body>
</html>は私のコードです
スタイルを直接設定する代わりに、新しいクラスを直接追加するのではなく、 '.red'と定義された赤い枠線。すべての入力が正しく入力されたら、これらの要素すべてを 'red'クラスから削除してください。 – panther