remove label message on keydown - javascript

quick question, my prompt is working okay, when someone leave the phone input field blank my label message shows, but how do I remove the message, when they go back to the input field on click down?

function validatePhone(){
			var phone  = document.getElementById("phone1").value;
			if(phone.length === 0) {
				console.log("phone number is required.");
				producePrompt("Phone number is required.", "messagePrompt", "red");
				return false;
			} 
		}


		function producePrompt(message, promptLocation, color) {
			document.getElementById(promptLocation).innerHTML = message;
			document.getElementById(promptLocation).style.color = color;
		}
	form {
		width: 30em;
		height: 10em;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		background: #2c3e50;
	}

	form input {
		text-align: left;
		padding-left: 5px;
		margin: 0 0 10px 15px;
		position: relative;
		
		}

	form label {
		text-align: center;
	}

	#messagePrompt {
		color: red;
				
<form>
		<p>Please enter your phone number below:</p>
		<input name="phone1" id="phone1" placeholder="(000)000-0000" />
		<label for="" id="messagePrompt"></label>
		<br>
	  	<input type="button"  value="send message" onclick="validatePhone()"  />
	</form>

Answers


just add function on ur input label to remove_msg

function validatePhone(){
			var phone  = document.getElementById("phone1").value;
			if(phone.length === 0) {
				console.log("phone number is required.");
				producePrompt("Phone number is required.", "messagePrompt", "red");
				return false;
			} 
		}


		function producePrompt(message, promptLocation, color) {
			document.getElementById(promptLocation).innerHTML = message;
			document.getElementById(promptLocation).style.color = color;
		}

function remove_msg(){
				producePrompt(" ", "messagePrompt", "red");

}
	form {
		width: 30em;
		height: 10em;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		background: #2c3e50;
	}

	form input {
		text-align: left;
		padding-left: 5px;
		margin: 0 0 10px 15px;
		position: relative;
		
		}

	form label {
		text-align: center;
	}

	#messagePrompt {
		color: red;
    }
<form>
  <p>Please enter your phone number below:</p>
  <input name="phone1" id="phone1" placeholder="(000)000-0000" onclick="remove_msg()" />
  <label for="" id="messagePrompt"></label>
  <br>
  <input type="button"  value="send message" onclick="validatePhone()"  />
</form>

If you can use jQuery this becomes very easy:

$('#phone1').mousedown(function() {
    $('#messagePrompt').remove();
});

Or, possibly just remove the prompt when focus is given to the input field so keyboard navigation works as well:

$('#phone1').focusin(function() {
    $('#messagePrompt').remove();
});

If you don't want to actually remove the label and just have it be blank you can replace the remove() call with:

$('#messagePrompt').text('');

Need Your Help

"invalid command code ." error from sed after running find and sed on Mavericks

command-line sed find osx-mavericks

I run the following command to find and replace an old web address to a new one.