0
Ich validiere eines meiner Formulare, aber ich habe es zu überprüfen, ob es leer ist, dann wird es nicht durchlaufen und die bordercolor wird zu rot ändern, aber nachdem ich das Formular korrekt ausgefüllt bordercolor bleibt immer gleich. Wie kann ich es machen, wo, sobald sie es legt korrekt wieder in seinen ursprünglichen Zustand Ändern Sie die Farbe zurück in normal nach dem Einreichen
hier ist
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>
Anstatt Styles direkt hinzuzufügen, fügen Sie eine neue Klasse hinzu, z. '.rot' mit definiertem roten Rand. Wenn alle Eingaben korrekt sind, entferne einfach die 'rote' Klasse von all diesen Elementen. – panther