Clever Geek Handbook

Make input fields empty if there is text inside them

I would like my input fields to have a white background as soon as the text appears inside the field. After the user exits the window, if there is still text in the field, I would like it to appear white. If anyone knows how to do this, I would appreciate your help. I've attached a script of what my code looks like, as well as an image of the comp that I want my form to look like.

Comp I would like my code to look like [] Fiddle] 2

function phoneNumber(phone)  {
  var phoneno = /^\d{9,11}$/;

  console.log("PHONE: "+phoneno.test(phone));
  return phoneno.test(phone);
}

$('input[type="tel"]').on('keyup', function() {
  var $label = $(this).closest('label');
  if ($(this).val().trim() != '') {
    if ($(this).is('#phone')) {
      if (phoneNumber($(this).val())) {
        $label.attr('data-valid', 'valid');
         $(this).next("i").removeClass("fa-times-circle-o").addClass("fa-check-circle");
      } else {
        $label.attr('data-valid', 'error');
         $(this).next("i").removeClass("fa-check-circle").addClass("fa-times-circle-o");
      }
    } else {
      $label.attr('data-valid', 'valid');
    }
  } else {
    $label.removeAttr('data-valid');

  }
});

function validateEmail(email) {
  var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

  console.log("email: "+re.test(email));
  return re.test(email);
}

$('input[type="text"]').on('keyup', function() {
  var $label = $(this).closest('label');
  if ($(this).val().trim() != '') {
    if ($(this).is('#email')) {
      if (validateEmail($(this).val())) {
        $label.attr('data-valid', 'valid');
        $(this).next("i").removeClass("fa-times-circle-o").addClass("fa-check-circle");

      } else {
        $label.attr('data-valid', 'error');
         $(this).next("i").removeClass("fa-check-circle").addClass("fa-times-circle-o");
      }
    } else {
      $label.attr('data-valid', 'valid');
    }
  } else {
    $label.removeAttr('data-valid');
  }

});


test = function() {
  if ($("#first_name").val()
      && $("#last_name").val()
      && (validateEmail($("#email").val()))
      && (phoneNumber($("#phone").val()))
      && $("#phone").val()
      && $("#city").val()
      && $("#state").val()
      && $("#company").val()
      && $("#comments").val()) {

    $("#sub").removeAttr("disabled") && $("#sub2").removeAttr("disabled");
  }
}


 $('#phone').keydown(function(){
   var self = $(this);
   var removedText = self.val().replace(/\D/, '');

   self.val(removedText);
});


$("#contact_form").submit(function(event) {
    console.log("Form success");
    ("#contact_form").
    event.preventDefault();
    return false;
})

$("#sub").submit("click", function(e){e.preventDefault()})

$("#sub").on("click", function(e)
{
 $("#contact_form").remove();
 $("#thankyou").addClass("success");
})


$("#sub2").submit("click", function(e){e.preventDefault()})

$("#sub2").on("click", function(e)
{
 $("#contact_form").remove();
 $("#thankyou").addClass("success");
})
      

        
        
        
      

    
body {
  color: #fff;
  background-color: #30bda6;
  text-align: center;
}

form {
  color: #fff;
  background-color: #f78e2a;
  text-align: center;
  font-family: Lato;
}

* {
  box-sizing: border-box;
}

.form-title {
  font-size: 38px;
  color: #fff;
  font-family: "Lato";
  letter-spacing: 70px;
}

input {
  font-size: 15px;
  height: 48px;
  margin-top: 8px;
  color: #333;
}

input[type="tel"] {
  width: 100%;
  padding: 10px;
  background-color: #f9a558;
  border: 1px solid #fff;
  font-size: 15px;
  height: 48px;
  color: #333;

}
input[type="text"] {
  width: 100%;
  padding: 10px;
  background-color: #f9a558;
  border: 1px solid #fff;
  font-size: 15px;
  color: #333;

}

input:focus {
  background-color: #fff;
}


input[type="text"]:focus {
  background-color: #fff;
}

input[type="text"]:visited {
  background-color: #fff;
}

input[type="tel"]:focus {
  background-color: #fff;
}

input[type="tel"]:visited {
  background-color: #fff;
}

.container {
  display: flex;
  flex-direction: column;
  padding: 5px 0;
}

textarea {
  width: 100%;
  background-color: #f9a558;
  border: 1px solid #fff;
  color: #333;
  font-family: Lato;
}

textarea:focus {
  background-color: #fff;
}

#co {
  flex-basis: 100%;
  max-width: 100%;
}

label:nth-last-child(-n+2) {
  flex-basis: 100%;
  max-width: 100%;
}

select,
label {
  height: 50px;
  width: 48%;
  margin: 2% 1%;
  text-align: left;
  font-family: "Lato";
  font-size: 15px;
}

#sub {
  border-radius: 6px;
  width: 120px;
  height: 35px;
  text-transform: uppercase;
  display: block;
  margin-top: 48px;
  font-size: 16px;
  font-family: Lato;
  border: none;
}

#sub2 {
  border-radius: 6px;
  width: 120px;
  height: 35px;
  text-transform: uppercase;
  display: block;
  margin-top: 48px;
  font-size: 16px;
  font-family: Lato;
  border: none;
}


label {
  position: relative;
}

.fa {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(-50%, 65%);
  opacity: 0;
  transition: opacity .5s, color .5s;
}

[data-valid] .fa {
  opacity: 1;
  color: #00594C;
}

[data-valid="valid"] .fa {
  color: #00594C;
}

[data-valid="error"] .fa {
  color: #AB0000;
}

.error {
  display: none;
  color: #AB0000;
  font-size: .7em;
  position: absolute;
  left: 10px;
  top: 0;
  transform: translateY(150%);
  font-size: 12px;
  margin-top: 2px;
}

[data-valid="error"] .error {
  display: block;
}

input#sub2:not([disabled]){
    background-color: #fff;
    color:  #00AB8E;
}

input#sub:not([disabled]){
    background-color: #fff;
    color: #F68D2E;;
}


#thankyou { display:none;}

#thankyou.success { 
    display: block;
    text-align: center;
}

#tessellate-page input:focus {
    background-color: #fff !important;;
}

#tessellate-page textarea:focus {
    background-color: #fff !important;;
}

#tessellate-page input[type="text"] {
  width: 100%;
  padding: 10px;
  background-color: #30bda6;
  border: 1px solid #fff;
  color: #333;
}

#tessellate-page input[type="tel"] {
    background-color: #30bda6;
}

#tessellate-page textarea{
    background-color: #30bda6;
}

#comments_label {
    margin-top: 8px;
}

#cap {
    margin-top: 20px;
}


@media (max-width: 656px) {
  label {
    width: 98%;
    height: 70px;
  }

   .fa {
    transform: translate(-50%, -45%);
  }
}

@media (min-width: 656px) {
  .container {
    flex-direction: row;
    flex-wrap: wrap;
    align-self: flex-start;
  }

  label {
    margin-bottom: 20px;

  }


}

label {
    margin-bottom: 48px;
}
      

        
        
        
      

    
<form id="contact_form" class="container form-hide" autocomplete="off" autocomplete="false" action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST" style="background-color: #00AB8E">
  <label>First Name
    <span class="error">Please enter data.</span>
    <input id="tesFN first_name " maxlength="40" name="first_name" size="20" type="text" onkeyup="test()" required style="background-color: #30bda6"><i class="fa fa-check-circle" aria-hidden="true"></i>
  </label>
  <label>Last Name
    <input id="last_name" maxlength="80" name="last_name" size="20" type="text" onkeyup="test()" required style="background-color: #30bda6"><i class="fa fa-check-circle" aria-hidden="true"></i>
  </label>
  <label>Email
    <span class="error">Please enter a valid email address</span>
    <input id="email" maxlength="80" name="email" size="20" type="text" onkeyup="test()" required style="background-color: #30bda6"><i class="fa fa-times-circle-o" aria-hidden="true"></i>
  </label>
  <label>Phone
    <span class="error">Please enter a valid phone number</span>              
    <input id="phone" maxlength="80" name="phone" size="20" type="tel" onkeyup="test()" required style="background-color: #30bda6"><i class="fa fa-check-circle" aria-hidden="true"></i>
  </label>
  <label>City
    <input id="city" name="city" maxlength="40" size="20" type="text" onkeyup="test()" required style="background-color: #30bda6"><i class="fa fa-check-circle" aria-hidden="true"></i>
  </label>
  <label>State/Province
    <input id="state" maxlength="20" name="state" size="20" type="text" onkeyup="test()" required style="background-color: #30bda6"><i class="fa fa-check-circle" aria-hidden="true"></i>
  </label>
  <label id="co">Company
    <input id="company" name="company" type="text" onkeyup="test()" required style="background-color: #30bda6"><i class="fa fa-check-circle" aria-hidden="true"></i>
  </label>
  <label>Comments
    <textarea id="comments" name="" id="" cols="30" rows="10" onkeyup="test()" required style="background-color: #30bda6"></textarea>
    <input id="sub2" type="submit" disabled="disabled" value="SUBMIT"/>
  </label>

    <div>                
        <select  hidden="true" id="00N6A000008yXMN" name="00N6A000008yXMN" title="Product Interest">
        <option value="">--None--</option>
        <option selected="selected" value="Visiant">Visiant</option>
        <option  value="Tessellate">Tessellate</option>
    </select><br>

    <select  hidden="true" id="lead_source" name="lead_source">
        <option value="">--None--</option>
        <option value="Internal">Internal</option>
    <option value="Trade Show">Trade Show</option>
    <option selected="selected" value="Website">Website</option>
    <option value="Direct Marketing">Direct Marketing</option>
    <option value="Social Media">Social Media</option>
    <option value="Other">Other</option>
    </select><br>
    </div>
</form>
Run codeHide result


+3


source to share


3 answers


Extract the inline background-colors

and add / remove a class that sets the background to white on keyup

in your test where you see if$.val() != '' 



function phoneNumber(phone)  {
  var phoneno = /^\d{9,11}$/;

  console.log("PHONE: "+phoneno.test(phone));
  return phoneno.test(phone);
}

$('input[type="tel"]').on('keyup', function() {
  var $label = $(this).closest('label');
  if ($(this).val().trim() != '') {
    if ($(this).is('#phone')) {
      if (phoneNumber($(this).val())) {
        $label.attr('data-valid', 'valid');
         $(this).next("i").removeClass("fa-times-circle-o").addClass("fa-check-circle");
      } else {
        $label.attr('data-valid', 'error');
         $(this).next("i").removeClass("fa-check-circle").addClass("fa-times-circle-o");
      }
    } else {
      $label.attr('data-valid', 'valid');
    }
  } else {
    $label.removeAttr('data-valid');

  }
});



function validateEmail(email) {
  var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

  console.log("email: "+re.test(email));
  return re.test(email);
}

$('input[type="text"]').on('keyup', function() {
  var $label = $(this).closest('label');
  if ($(this).val().trim() != '') {
  	$(this).addClass('hasText');
    if ($(this).is('#email')) {
      if (validateEmail($(this).val())) {
        $label.attr('data-valid', 'valid');
        $(this).next("i").removeClass("fa-times-circle-o").addClass("fa-check-circle");
        
      } else {
        $label.attr('data-valid', 'error');
         $(this).next("i").removeClass("fa-check-circle").addClass("fa-times-circle-o");
      }
    } else {
      $label.attr('data-valid', 'valid');
    }
  } else {
    $label.removeAttr('data-valid');
    $(this).removeClass('hasText');
  }

});


test = function() {
  if ($("#first_name").val()
      && $("#last_name").val()
      && (validateEmail($("#email").val()))
      && (phoneNumber($("#phone").val()))
      && $("#phone").val()
      && $("#city").val()
      && $("#state").val()
      && $("#company").val()
      && $("#comments").val()) {
    
    $("#sub").removeAttr("disabled") && $("#sub2").removeAttr("disabled");
  }
}


 $('#phone').keydown(function(){
   var self = $(this);
   var removedText = self.val().replace(/\D/, '');
    
   self.val(removedText);
});


$("#contact_form").submit(function(event) {
    console.log("Form success");
    ("#contact_form").
    event.preventDefault();
    return false;
})

$("#sub").submit("click", function(e){e.preventDefault()})

$("#sub").on("click", function(e)
{
 $("#contact_form").remove();
 $("#thankyou").addClass("success");
})


$("#sub2").submit("click", function(e){e.preventDefault()})

$("#sub2").on("click", function(e)
{
 $("#contact_form").remove();
 $("#thankyou").addClass("success");
})
      

        
        
        
      

    
body {
  color: #fff;
  background-color: #30bda6;
  text-align: center;
}

form {
  color: #fff;
  background-color: #f78e2a;
  text-align: center;
  font-family: Lato;
}

* {
  box-sizing: border-box;
}

.form-title {
  font-size: 38px;
  color: #fff;
  font-family: "Lato";
  letter-spacing: 70px;
}

input {
  font-size: 15px;
  height: 48px;
  margin-top: 8px;
  color: #333;
}

input[type="tel"] {
  width: 100%;
  padding: 10px;
  background-color: #f9a558;
  border: 1px solid #fff;
  font-size: 15px;
  height: 48px;
  color: #333;

}
input[type="text"] {
  width: 100%;
  padding: 10px;
  background-color: #30bda6;
  border: 1px solid #fff;
  font-size: 15px;
  color: #333;
}

input[type="text"]:visited {
  background-color: #fff;
}

input[type="tel"]:focus {
  background-color: #fff;
}

input[type="tel"]:visited {
  background-color: #fff;
}

.container {
  display: flex;
  flex-direction: column;
  padding: 5px 0;
}

textarea {
  width: 100%;
  background-color: #f9a558;
  border: 1px solid #fff;
  color: #333;
  font-family: Lato;
}

textarea:focus {
  background-color: #fff;
}

#co {
  flex-basis: 100%;
  max-width: 100%;
}

label:nth-last-child(-n+2) {
  flex-basis: 100%;
  max-width: 100%;
}

select,
label {
  height: 50px;
  width: 48%;
  margin: 2% 1%;
  text-align: left;
  font-family: "Lato";
  font-size: 15px;
}

#sub {
  border-radius: 6px;
  width: 120px;
  height: 35px;
  text-transform: uppercase;
  display: block;
  margin-top: 48px;
  font-size: 16px;
  font-family: Lato;
  border: none;
}

#sub2 {
  border-radius: 6px;
  width: 120px;
  height: 35px;
  text-transform: uppercase;
  display: block;
  margin-top: 48px;
  font-size: 16px;
  font-family: Lato;
  border: none;
}


label {
  position: relative;
}

.fa {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(-50%, 65%);
  opacity: 0;
  transition: opacity .5s, color .5s;
}

[data-valid] .fa {
  opacity: 1;
  color: #00594C;
}

[data-valid="valid"] .fa {
  color: #00594C;
}

[data-valid="error"] .fa {
  color: #AB0000;
}

.error {
  display: none;
  color: #AB0000;
  font-size: .7em;
  position: absolute;
  left: 10px;
  top: 0;
  transform: translateY(150%);
  font-size: 12px;
  margin-top: 2px;
}

[data-valid="error"] .error {
  display: block;
}

input#sub2:not([disabled]){
	background-color: #fff;
	color: 	#00AB8E;
}

input#sub:not([disabled]){
	background-color: #fff;
	color: #F68D2E;;
}


#thankyou { display:none;}

#thankyou.success { 
	display: block;
	text-align: center;
}

#tessellate-page input:focus {
	background-color: #fff !important;;
}

#tessellate-page textarea:focus {
	background-color: #fff !important;;
}

#tessellate-page input[type="text"] {
  width: 100%;
  padding: 10px;
  background-color: #30bda6;
  border: 1px solid #fff;
  color: #333;
}

#tessellate-page input[type="tel"] {
	background-color: #30bda6;
}

#tessellate-page textarea{
	background-color: #30bda6;
}

#comments_label {
	margin-top: 8px;
}

#cap {
	margin-top: 20px;
}


@media (max-width: 656px) {
  label {
    width: 98%;
    height: 70px;
  }

   .fa {
  	transform: translate(-50%, -45%);
  }
}

@media (min-width: 656px) {
  .container {
    flex-direction: row;
    flex-wrap: wrap;
    align-self: flex-start;
  }

  label {
  	margin-bottom: 20px;

  }


}

label {
	margin-bottom: 48px;
}

input[type="text"].hasText {
  background: white;
}
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="contact_form" class="container form-hide" autocomplete="off" autocomplete="false" action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST" style="background-color: #00AB8E">
              <label>First Name
                <span class="error">Please enter data.</span>
                <input id="tesFN first_name " maxlength="40" name="first_name" size="20" type="text" onkeyup="test()" required><i class="fa fa-check-circle" aria-hidden="true"></i>
              </label>
              <label>Last Name
                <input id="last_name" maxlength="80" name="last_name" size="20" type="text" onkeyup="test()" required ><i class="fa fa-check-circle" aria-hidden="true"></i>
              </label>
              <label>Email
                <span class="error">Please enter a valid email address</span>
                <input id="email" maxlength="80" name="email" size="20" type="text" onkeyup="test()" required ><i class="fa fa-times-circle-o" aria-hidden="true"></i>
              </label>
              <label>Phone
                <span class="error">Please enter a valid phone number</span>              
                <input id="phone" maxlength="80" name="phone" size="20" type="tel" onkeyup="test()" required ><i class="fa fa-check-circle" aria-hidden="true"></i>
              </label>
              <label>City
                <input id="city" name="city" maxlength="40" size="20" type="text" onkeyup="test()" required ><i class="fa fa-check-circle" aria-hidden="true"></i>
              </label>
              <label>State/Province
                <input id="state" maxlength="20" name="state" size="20" type="text" onkeyup="test()" required ><i class="fa fa-check-circle" aria-hidden="true"></i>
              </label>
              <label id="co">Company
                <input id="company" name="company" type="text" onkeyup="test()" required ><i class="fa fa-check-circle" aria-hidden="true"></i>
              </label>
              <label>Comments
                <textarea id="comments" name="" id="" cols="30" rows="10" onkeyup="test()" required ></textarea>
                <input id="sub2" type="submit" disabled="disabled" value="SUBMIT"/>
              </label>

                <div>                
                    <select  hidden="true" id="00N6A000008yXMN" name="00N6A000008yXMN" title="Product Interest">
                    <option value="">--None--</option>
                    <option selected="selected" value="Visiant">Visiant</option>
                    <option  value="Tessellate">Tessellate</option>
                </select><br>

                <select  hidden="true" id="lead_source" name="lead_source">
                    <option value="">--None--</option>
                    <option value="Internal">Internal</option>
                <option value="Trade Show">Trade Show</option>
                <option selected="selected" value="Website">Website</option>
                <option value="Direct Marketing">Direct Marketing</option>
                <option value="Social Media">Social Media</option>
                <option value="Other">Other</option>
                </select><br>
                </div>
            </form>
Run codeHide result


+3


source


Unfortunately, you cannot do this with CSS alone. You will have to use JS.

You can use an event change

to listen for changes on the input values, then, like the answer above, change the input class to one that applies a white background. Something like that:



$('input').on('change', function(){
    if ($(this).val().trim() == ''){
        $(this).removeClass('whiteBg'); // 'whiteBg' would be your class that adds the white background.
    }
    else {
        $(this).addClass('whiteBg');
    }
});
0


source


You can change the background to white in the event oninput

. It runs when the element receives user input.

$('input').on('input', function() {
    // add background white class
});

for example

$('input').on('input', function() {
   ($(this).val().trim() !== '') ? $(this).addClass('white') : $(this).removeClass('white');
});
      

        
        
        
      

    
input{
    background: green;
}
.white{
    background: #fff;
}
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
<input type="text">
Run codeHide result


0


source






More articles:


All Articles