I have the following HTML:
<form id="contactInfo" name="contactInfo">
<label>Name: </label>
<input type="text" name="name"></input><br/><br/>
<label>E-mail: </label>
<input type="text" name="email"></input><br/><br/>
<label>Message:</label><br/>
<textarea rows="10" cols="80" name="message"></textarea><br/><br/>
<input type="submit" name="sendMessage" onclick="messageChecker()"></input>
</form>
And the following Javascript:
function messageChecker(){
let x = document.forms["contactInfo"]["name"].value;
let y = document.forms["contactInfo"]["email"].value;
let z = document.forms["contactInfo"]["message"].value;
if (x=="" || y=="" || z==""){
alert("Please fill out the indicated field(s).");
if (x==""){
document.forms["contactInfo"]["name"].style.border = "1px solid red";
}
if (y==""){
document.forms["contactInfo"]["email"].style.border = "1px solid red";
}
if (z==""){
document.forms["contactInfo"]["message"].style.border = "1px solid red";
}
}
}
So I want the red border to appear when the form is submitted and a field isn't filled in; it appears for less than a second, then disappears, along with the entered text. How can I get it to stay?
Because you are performing a form submit, if you want an app style behavior where you are not submitting forms and then reloading the web page then you need to use AJAX types of data submission.
maybe use an e.preventDefault() handler to unblock your code?
The preventDefault() method is used to prevent the browser from executing the default action of the selected element. It can prevent the user from processing the request by clicking the link. Syntax:
event.preventDefault()