Change Color back to normal in javascript after submitting

Question

I am validating one of my forms ,but I have it to check if its empty then it wont go through and the bordercolor will change to red, but after I complete the form correctly the bordercolor will still stay the same. How do I make it where once it submits correctly it will go back to its original state

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>

here is my code

Instead of setting styles directly add a new class, eg. `.red` with defined red border. When all inputs are filled correctly, just remove `red` class form all these elements. — pavel, Dec 15 '17 at 08:28

score 0 · Answer 1 · answered Dec 15 '17 at 08:45

0

I think you need to add else part to your first two statements or simply use else if statement. As for currency, it is working fine but for the dAmount it is only red as you are not modifying after its color changed.

answered Dec 15 '17 at 08:45

Krishna Devashish

76
6

score 0 · Answer 2 · answered Dec 15 '17 at 08:46

Let the browser handle this for you with the type="number" attribute, required attribute, and :invalid pseudo-class:

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;
}

<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>

The select and option magic comes from this SO question about select placeholders.

See also MDN's article on form validation.

Change Color back to normal in javascript after submitting

2 Answers2