Question

我正在验证我的一个表单，但我要检查它是否为空然后它不会通过而bordercolor将变为红色，但在我正确完成表单后，bordercolor仍将保持不变。如何正确提交它将使其恢复到原始状态

function convert() {
	var dAmount, currency, total, err = "";

	dAmount = document.getElementById('dAmount').value;
	currency = document.getElementById('Currency').value;

	if (isNaN(dAmount)) {
		err += 'Enter a valid number!<br />';
		document.getElementById('dAmount').style.borderColor = "red";
	}


	if (dAmount == '') {
		err += 'Amount Missing!<br />'
		document.getElementById('dAmount').style.borderColor = "red";
	}


	if (currency == 'Choose') {
		err += 'Please Select a currency!<br />';
		document.getElementById('Currency').style.borderColor = "red";
		return false;
	} else {
		document.getElementById('Choose').style.borderColor = 'gray';
	}


	if (err.length > 0) {
		document.getElementById('error').style.display = 'block';
		document.getElementById('error').innerHTML = err;
		return false;
	} else {
		document.getElementById('error').style.display = 'none';

	}






}

	#wrapper {
		width: 600px;
		text-align: center;
		margin: 250px auto 0;
	}

	body {

	}

	form {
		width: 580px;
		padding: 10px;
	}

	label {
		float: left;
		width: 150px;
		display: block;
		clear: left;
		text-align: right;
		padding-right: 10px;
		margin-top: 15px;
	}

	input, select, span {
		margin-top: 15px;
		display: block;
	}

	input[type="button"] {
		float: right;
	}

	#error {
		border: 2px solid red;
		padding: 25px;
		text-align: center;
		font-size: 24px;
		font-weight: bold;
		display: none;
	}

<!DOCTYPE html>

<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Final Exam</title>
	<link rel="stylesheet" href="converter.css">
	<script src="converter.js"></script>
</head>

<body>
	<div id="wrapper">
		<h1> Currency Converter</h1>
		<div id="error"></div>
		<form id="CForm">
			<label for="dAmount">Dollar Amount: </label>
			<input type="text" id="dAmount" name="dAmount" /> <br />

			<label for="Currency"> Currency: </label>
			<select id="Currency" name="Currency">
				<option value="Choose">Select One</option>
				<option value="British Pound"> British Pound </option>
				<option value="Mexican Peso"> Mexican Peso </option>
				<option value="Euro"> Euro </option>
				<option value="Japanese Yen"> Japanese Yen </option>
			</select>
			<br />
			<label for="Total"> Amount</label>
			<span id="Total"></span>
			<br />

			<input type="button" value="Convert" onclick="convert()" />
			<input type="reset"	value="Clear" id="bReset"/>

			</form>
	</div>
</body>

</html>

这是我的代码

Answer 1

我认为您需要在前两个语句中添加else部分，或者只使用else if语句。至于货币，它工作正常，但对于dAmount它只是红色，因为你的颜色改变后你没有修改。

Answer 2

让浏览器使用type="number" attribute，required attribute和:invalid pseudo-class处理此问题：

＆＃13;

input:invalid, select:invalid {
  border: 1px solid red;
}

form {
	width: 580px;
	padding: 10px;
}

label {
	float: left;
	width: 150px;
	display: block;
	clear: left;
	text-align: right;
	padding-right: 10px;
	margin-top: 15px;
}

input, select, span {
	margin-top: 15px;
	display: block;
}

input[type="button"] {
	float: right;
}

＆＃13;

<form id="CForm">
	<label for="dAmount">Dollar Amount: </label>
	<input type="number" id="dAmount" name="dAmount" required /> <br />

	<label for="Currency"> Currency: </label>
	<select id="Currency" name="Currency" required>
		<option value="" disabled selected hidden>Select One</option>
		<option value="British Pound"> British Pound </option>
		<option value="Mexican Peso"> Mexican Peso </option>
		<option value="Euro"> Euro </option>
		<option value="Japanese Yen"> Japanese Yen </option>
	</select>
	<br />
	<label for="Total"> Amount</label>
	<span id="Total"></span>
	<br />

	<input type="button" value="Convert" onclick="convert()" />
	<input type="reset"	value="Clear" id="bReset"/>
</form>

＆＃13;

select和option魔法来自this SO question about select placeholders。

另见MDN's article on form validation。

提交后，在javascript中将颜色更改回正常状态

2 个答案: