We Keep Coding

onclick editable text field using javascript

Well, I am learning to create forms so I got this problem. I want a input field which will be simple text and when onclicking edit button it should be a input field. My link to work (https://codepen.io/TA0011/pen/XWBdbyW).
.wrapper-user{
width: 100%;
margin: 0 auto;
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 800px;
padding: 25px 40px 10px 40px;
border-radius: 10px;
}
.wrapper-user form .form-row{
display: flex;
margin: 32px 0;
}
form .form-row .input-box{
display: flex;
align-items: center;
width: 100%;
height: 40px;
margin: 0 20px;
position: relative;
}
.form-row button{
margin-left:auto;
color: #fff;
background: #007bff;
border-radius: 6px;
padding:5px 10px;
cursor: pointer;
transition: all 0.4s ease;
border: none;
outline: none;
}
.form-row .input-box input{
height: 100%;
width: 100%;
outline: none;
border: none;
padding: 0 30px;
font-size: 16px;
font-weight: 500;
border-bottom: 2px solid rgba(0,0,0,0.2);
transition: all 0.3s ease;
}
.form-row .input-box p{
font-size: 16px;
font-weight: 500;
padding: 0 30px;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
<div class="wrapper-user">
<form action="" method="post" enctype="multipart/form-data">
<h2> First</h2>
<div class="form-row">
<div class="input-box">
<i class="fas fa-user"></i>
<input type="text" value="Umann">
</div><button class="btn">Edit</button>
<div class="input-box">
<i class="fas fa-envelope"></i>
<input type="email" Value="uxxxxxxgoxxxxx#gmail.com">
</div>
<button class="btn">Edit</button>
</div><!--form-row-->
<h2>Second</h2>
<div class="form-row">
<div class="input-box">
<i class="fas fa-user"></i>
<p>Umann Goxxxxxxxx</p>
</div>
<button class="btn">Edit</button>
<div class="input-box">
<i class="fas fa-envelope"></i>
<p>UmannXXXXXXX#gmail.com</p>
</div>
<button class="btn">Edit</button>
</div><!--form-row-->
</form>
</div>
Also my query is if we can write but it should display as . And on clicking edit button it should turn in editable textfield.
I tried contenteditable but I want in input form so that I can store the value in database.

I'll propose you a little solution (for only the input fields).
1-Set the input field with readonly attribute and an unique id
2-Set to the button the data-edit attribute same as the id of input field you want to set editable
2.1 - Remember to set type="button" to prevent form submit
3- with js get all buttons with class btn and loop the collection
4- add a listener to each button
5- get the data-edit attribute of the clicked button to select the relative input
6-set readonly false
UPDATE:
When you click on edit button the attribute readonly is toggled and loses focus
const buttons = document.querySelectorAll('.btn');
buttons.forEach(item => {
item.addEventListener('click', function(el) {
let idInputAttibute = "#" + item.getAttribute('data-edit');
let inputField = document.querySelector(idInputAttibute);
inputField.readOnly ? (inputField.readOnly = false,inputField.focus()) :
inputField.readOnly = true
;
});
})
.wrapper-user {
width: 100%;
margin: 0 auto;
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 800px;
padding: 25px 40px 10px 40px;
border-radius: 10px;
}
.wrapper-user form .form-row {
display: flex;
margin: 32px 0;
}
form .form-row .input-box {
display: flex;
align-items: center;
width: 100%;
height: 40px;
margin: 0 20px;
position: relative;
}
.form-row button {
margin-left: auto;
color: #fff;
background: #007bff;
border-radius: 6px;
padding: 5px 10px;
cursor: pointer;
transition: all 0.4s ease;
border: none;
outline: none;
}
.form-row .input-box input {
height: 100%;
width: 100%;
outline: none;
border: none;
padding: 0 30px;
font-size: 16px;
font-weight: 500;
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
.form-row .input-box p {
font-size: 16px;
font-weight: 500;
padding: 0 30px;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
<div class="wrapper-user">
<form action="" method="post" enctype="multipart/form-data">
<h2> First</h2>
<div class="form-row">
<div class="input-box">
<i class="fas fa-user"></i>
<input id="name" type="text" value="Umann" readonly>
</div><button class="btn" type="button" data-edit="name">Edit</button>
<div class="input-box">
<i class="fas fa-envelope"></i>
<input type="email" id="email" value="uxxxxxxgoxxxxx#gmail.com" readonly>
</div>
<button class="btn" data-edit="email" type="button">Edit</button>
</div>
<!--form-row-->
<h2>Second</h2>
<div class="form-row">
<div class="input-box">
<i class="fas fa-user"></i>
<p>Umann Goxxxxxxxx</p>
</div>
<button class="btn">Edit</button>
<div class="input-box">
<i class="fas fa-envelope"></i>
<p>UmannXXXXXXX#gmail.com</p>
</div>
<button class="btn">Edit</button>
</div>
<!--form-row-->
</form>
</div>

Voice input to Angular Forms

I am using Angular 11 and I need to add the voice input to the forms field. After watching some tutorials I came to know that "x-webkit-speech" enables voice input.
I referred one article https://codepen.io/matt-west/pen/wbpqu, they are using the JavaScript.
I tried to convert the script into TypeScript but I ended in few errors.
I want the same thing to be converted into TypeScript which supports for Angular 9+
HTML, CSS and JS file (to be converted to TypeScript which supports angular 9+)
var msg = document.getElementById('msg');
if (document.createElement('input').webkitSpeech === undefined) {
msg.innerHTML = "x-webkit-speech is <strong>not supported</strong> in your browser.";
} else {
msg.innerHTML = "x-webkit-speech is <strong>supported</strong> in your browser.";
}
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-family: Helvetica, Arial, sans-serif;
font-size: 100%;
background: #333;
}
#page-wrapper {
width: 640px;
background: #FFFFFF;
padding: 1em;
margin: 1em auto;
border-top: 5px solid #69c773;
box-shadow: 0 2px 10px rgba(0,0,0,0.8);
}
h1 {
margin-top: 0;
}
label {
display: block;
padding-bottom: 0.25em;
}
input {
display: block;
font-size: 1.2em;
padding: 0.25em;
width: 100%;
margin-bottom: 1em;
border-radius: 3px;
border: 1px solid #BABABA;
}
button {
display: inline-block;
border-radius: 3px;
border: none;
font-size: 0.9rem;
padding: 0.4rem 0.8em;
background: #69c773;
border-bottom: 1px solid #498b50;
color: white;
-webkit-font-smoothing: antialiased;
font-weight: bold;
margin: 0 0.25rem;
text-align: center;
}
button:hover, button:focus {
opacity: 0.75;
cursor: pointer;
}
button:active {
opacity: 1;
box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.1) inset;
}
<div id="page-wrapper">
<h1>Speech Input Demo / Tester</h1>
<p id="msg"></p>
<label for="text">Text</label>
<input type="text" id="text" x-webkit-speech>
<label for="number">Number</label>
<input type="number" id="number" x-webkit-speech>
<label for="email">Email</label>
<input type="email" id="email" x-webkit-speech>
<label for="url">URL</label>
<input type="url" id="url" x-webkit-speech>
<label for="tel">Telephone</label>
<input type="tel" id="tel" x-webkit-speech>
<label for="date">Date</label>
<input type="date" id="date" x-webkit-speech>
<label for="datetime">Date and Time</label>
<input type="datetime" id="datetime" x-webkit-speech>
<label for="month">Month</label>
<input type="month" id="month" x-webkit-speech>
</div>
Note : I referred this code from online.
link - https://blog.teamtreehouse.com/accepting-speech-input-html5-forms

How to make a inline-block fit whole width?

I won't to make an inline block fill whole the width. Actually I am using amp. I want to make all the fields fit the whole width. But I am unable to make it. I can do it using !important. But it is a bad practice. So how I can I do it without using !important? I am using the bellow code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script async custom-element="amp-autocomplete" src="https://www.cdn.ampproject.org/v0/amp-autocomplete-0.1.js"></script>
<script async src="https://www.cdn.ampproject.org/v0.js"></script>
<style>
.page-form {
background: url(https://mydoginsurance.com.au/images/form-bg-lg.webp) no-repeat center;
background-size: cover;
position: relative;
color: #fff;
}
.section {
padding: 63px 0;
}
.page-form .container {
position: relative;
z-index: 100;
}
.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.justify-content-center {
-ms-flex-pack: center;
justify-content: center;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.text-center{
text-align: center;
}
.mb-5, .my-5 {
margin-bottom: 3rem;
}
h2, .h2 {
font-size: 2.5rem;
}
.page-form .container .form-box {
padding: 0;
border: none;
background: none;
box-shadow: none;
-webkit-box-shadow: none;
}
.form-box {
background: rgba(255, 255, 255, 0.25);
border: 1px solid #eaeaea;
-webkit-box-shadow: 0 13px 29px 0 rgb(0 0 0 / 35%);
box-shadow: 0 13px 29px 0 rgb(0 0 0 / 35%);
padding: 40px;
}
.justify-content-center {
-ms-flex-pack: center;
justify-content: center;
}
.form-box .mb-4 {
position: relative;
}
.form-box .form-control {
padding: 20px 0 0 18px;
height: 54px;
border: none;
border-radius: 2px;
color: #000;
}
.form-control, input[type=text], input[type=email], input[type=tel], input[type=file], input[type=search], textarea, select {
display: block;
width: 100%;
padding: 0.6rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
[type="search"] {
outline-offset: -2px;
-webkit-appearance: none;
}
</style>
</head>
<body>
<div class="page-form section" id="getquote">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="mb-5 text-center">
<h2>Submit your Dog info and we'll address your request ASAP</h2>
</div>
<div class="form-box">
<form action="https://mydoginsurance.com.au/choose-plan.html" method="GET" target="_top">
<div class="row justify-content-center">
<div class="col-sm-6">
<div class="mb-4">
<input type="text" name="dog_name" class="form-control" aria-labelledby="label_dog_name" required>
<label id="label_dog_name" for="dog_name">Name of Dog</label>
</div>
</div>
<div class="col-sm-6">
<div class="mb-4">
<amp-autocomplete filter="substring" min-characters="0" style="padding: 0; color: black; display: cover">
<input type="search" name="breed" class="form-control" id="tbdog" aria-labelledby="label_dog_breed" required>
<label id="label_dog_breed" for="breed">Breed of Dog</label>
<script type="application/json">
{ "items": [ "Affenpinscher", "Afghan Hound", "Airedale Terrier", "Akita" }
</script>
</amp-autocomplete>
</div>
</div>
<div class="col-sm-6">
<div class="mb-4">
<!--<input type="number" name="age" min="1" max="8" class="form-control" required>-->
<select name="age" class="form-control" aria-labelledby="label_dog_age" required>
<option></option>
<option value="0">
< 1 </option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<label id="label_dog_age" for="age">Age of Dog</label>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have hosted the site so that you can take a closer look to it: https://hungry-swanson-e6b32d.netlify.app/

you can add width: 100% to it (the amp-autocomplete component)

How to add an element after validating a form?

I want to add some text as well as a picture if possible after a user does not type in a string with the "#" symbol, then separate text telling the user that they did not type in an email.
I have not tried anything yet. I just want to receive a some information that will point me in the right direction.
This is the html and js code:
<!DOCTYPE html>
<html>
<head>
<title>
Sign Up Page
</title>
<link rel="stylesheet" href="style.css" media="screen"/>
</head>
<body>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("something must be filled out");
return false;
}
else if (!(x.includes("#")))
{
alert("you must have to filled value with #");
document.getElementById("nameT").style.color="red";
document.getElementById("fname").classList.add('error');
return false;
}
}
</script>
<div class="ocean">
<div class="wave"/>
<div class="wave"/>
</div>
<h1>
<center>
Whale
</center>
</h1>
<div class="loginbox">
<h2>
Login
</h2>
<form name="myForm" onsubmit="return validateForm()"
method="post">
<p id="nameT"> email </p>
<input type="text" id="fname" name="fname"
placeholder="enter email" onblur="validateForm()" />
<p name="passT"> password </p>
<input type="text" name="name" placeholder="enter
password" />
<br />
<input type="submit" value="Submit" />
<br />
<a href="#">
Lost your password?
</a>
<br />
<a href="#">
Create an account
</a>
</form>
</div>
</body>
</html>
This is the css code:
html, body { height: 100%; }
body {
background:radial-gradient(ellipse at center, rgba(255,254,234,1)
0%, rgba(255,254,234,1) 35%, #ffffff 100%);
overflow: hidden;
}
.ocean {
height: 5%;
width:100%;
position:absolute;
bottom:0;
left:0;
background: #ffffff;
}
.wave {
background: url(https://s3-us-west-
2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x;
position: absolute;
top: -198px;
width: 6400px;
height: 198px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53)
infinite;
transform: translate3d(0, 0, 0);
}
.wave:nth-of-type(2) {
top: -175px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s
infinite, swell 7s ease -1.25s infinite;
opacity: 1;
}
#keyframes wave {
0% {
margin-left: 0;
}
100% {
margin-left: -1600px;
}
}
#keyframes swell {
0%, 100% {
transform: translate3d(0,-25px,0);
}
50% {
transform: translate3d(0,5px,0);
}
}
.loginbox
{
width: 340px;
height: 360px;
background: #000;
color: #fff;
top: 50%;
left:50%;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
}
h2
{
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
}
.loginbox input
{
width: 100%;
margin-bottom: 20px;
}
.loginbox input[type="text"], input[type="password"]
{
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
.loginbox input[type="submit"]
{
border: none;
outline: none;
height: 48px;
background: #fb2525;
color: #fff;
font-size: 18px;
border-radius: 20px;
}
.loginbox input[type="submit"]:hover
{
cursor: pointer;
background: #ffc107;
color: #000;
}
.loginbox a
{
text-decoration: none;
font-size: 12px;
line-height: 20px;
color: darkgrey;
}
.loginbox p
{
margin: 0;
padding: 10px;
font-weight: bold;
}
.loginbox a:hover
{
color: #ffc107;
}
.error{
border-bottom:2px solid red !important;
}
The expected output is that when a user clicks off the email textbox and the email they filled out does not have "#", a text should all of a sudden appear bellow the textbox stating that the user did not enter an email. I have not tried to implement any code for this to happen, I just want someone to help me by pointing me in the right direction (I have tried to research this but I could not find anything).

You can use input type = 'email' and use pattern and title attribute to get perfect validation
<p id="nameT"> email </p>
<input type="email" id="fname" name="fname" placeholder="enter email" pattern="^[^\s#]+#[^\s#]+\.[^\s#]+$" title="enter valid email address" onkeyup="myFunction(event)">
<script>
function myFunction(e) {
if (e.target.validity.valid) {
console.log('input type email is valid');
// rest of your javascript code
}
</script>
in this way you get perfact validation for email field

You may try below code:
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("something must be filled out");
return false;
}
else if (!(x.includes("#")))
{
alert("you must have to filled value with #");
document.getElementById("nameT").style.color="red";
document.getElementById("email_error").style.display="inline-block";
document.getElementById("fname").classList.add('error');
return false;
}
}
html, body { height: 100%; }
body {
background:radial-gradient(ellipse at center, rgba(255,254,234,1)
0%, rgba(255,254,234,1) 35%, #ffffff 100%);
overflow: hidden;
}
.ocean {
height: 5%;
width:100%;
position:absolute;
bottom:0;
left:0;
background: #ffffff;
}
.wave {
background: url(https://s3-us-west-
2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x;
position: absolute;
top: -198px;
width: 6400px;
height: 198px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53)
infinite;
transform: translate3d(0, 0, 0);
}
.wave:nth-of-type(2) {
top: -175px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s
infinite, swell 7s ease -1.25s infinite;
opacity: 1;
}
#keyframes wave {
0% {
margin-left: 0;
}
100% {
margin-left: -1600px;
}
}
#keyframes swell {
0%, 100% {
transform: translate3d(0,-25px,0);
}
50% {
transform: translate3d(0,5px,0);
}
}
.loginbox
{
width: 340px;
height: 360px;
background: #000;
color: #fff;
top: 50%;
left:50%;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
}
h2
{
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
}
.loginbox input
{
width: 100%;
margin-bottom: 20px;
}
.loginbox input[type="text"], input[type="password"]
{
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
.loginbox input[type="submit"]
{
border: none;
outline: none;
height: 48px;
background: #fb2525;
color: #fff;
font-size: 18px;
border-radius: 20px;
}
.loginbox input[type="submit"]:hover
{
cursor: pointer;
background: #ffc107;
color: #000;
}
.loginbox a
{
text-decoration: none;
font-size: 12px;
line-height: 20px;
color: darkgrey;
}
.loginbox p
{
margin: 0;
padding: 10px;
font-weight: bold;
}
.loginbox a:hover
{
color: #ffc107;
}
.error{
border-bottom:2px solid red !important;
}
<!DOCTYPE html>
<html>
<head>
<title>
Sign Up Page
</title>
<link rel="stylesheet" href="style.css" media="screen"/>
</head>
<body>
<div class="ocean">
<div class="wave"></div>
<div class="wave"></div>
</div>
<h1>
<center>
Whale
</center>
</h1>
<div class="loginbox">
<h2>
Login
</h2>
<form name="myForm" onsubmit="return validateForm()"
method="post">
<p id="nameT"> email </p>
<input type="text" id="fname" name="fname"
placeholder="enter email" onblur="validateForm()">
<span id="email_error" style="display:none">user did not enter an email</span>
<p name="passT"> password </p>
<input type="text" name="name" placeholder="enter
password">
<br>
<input type="submit" value="Submit">
<br>
<a href="#">
Lost your password?
</a>
<br>
<a href="#">
Create an account
</a>
</form>
</div>
</body>
</html>

Simply You can use to validate email # using <input type="email" id="fname" name="fname"
placeholder="enter email" required>

If you want a simple email validation
<input type="email" name="email" required>
It's a browser default validation
Working code
<form>
<input type="email" name="email" required>
<input type="submit" value="Submit">
</form>

Issues with jQuery Validate onkeyup and highlighting

I am having issues with jQuery Validate. This is the first time I have created a form using Validate and am a little confused on why some of the things are not working. I uploaded it to JsFiddle HERE so that it does not become overwhelming on here, but they require that I add a little code so for the first issue I will include an example of what I tried below.
$('.awesome-form').validate({
onkeyup:true,
errorElement: 'div',
errorClass: 'formError',
I am trying to get it to validate onkeyup. I have tried to add onkeyup like it says in the documentation like above, but this does not do what I want it to do. The name field and the message field will not show an error until I click enter. Every now and then I can get it to appear but it is usually only after multiple clicks and submits.
I am having an issue with the custom highlight. For some reason it works only on the message input. essentially I would like it so that when an error occurs it will immediately turn the border-bottom to red.

$(function() {
$('.awesome-form .input-group input, textarea').focusout(function() {
var text_val = $(this).val();
if (text_val === "") {
$(this).removeClass('has-value');
} else {
$(this).addClass('has-value');
}
});
});
$(function() {
$.validator.setDefaults({
highlight: function(element) {
$(element)
.closest('.formInput')
.addClass('errorHighlight');
},
unhighlight: function(element) {
$(element)
.closest('.formInput')
.removeClass('errorHighlight');
}
});
$('.awesome-form').validate({
errorElement: 'div',
errorClass: 'formError',
errorContainer: '#errorPanel',
errorLabelContainer: '#errorPanel ul',
onkeyup:function(element) {
$(element).valid();
},
wrapper: 'li',
rules: {
name: {
required: true
},
email: {
required: true,
email: true
},
message: {
required: true
}
},
messages: {
name: {
required: 'Please include at least a first name'
},
email: {
required: 'Please include your email address',
email: 'Invalid email address'
},
message: {
required: 'Please include a short message'
}
}
});
});
.chosenContact {
cursor: pointer;
display: flex;
box-sizing: border-box;
width: 100px;
flex-direction: column;
align-items: flex-start;
margin: 0 5px;
}
.chosenContact p {
margin: 0;
padding: 0;
font-size: 14px;
}
label input {
display: none;
}
label input[type="radio"]:checked + img {
background: red;
border: solid 4px red;
}
input,
textarea {
background: none;
border: solid 2px #232323;
color: #232323;
padding: 15px 40px;
font-size: 18px;
display: inline-block;
}
input:focus,
input:active,
textarea:focus,
textarea:active {
outline: none;
}
input[type="text"],
input[type="email"],
textarea {
border: none;
border-bottom: 2px solid #232323;
min-width: 300px;
}
input[type="text"]..errorHighlight,
input[type="email"].errorHighlight,
textarea.errorHighlight {
width: 170px;
background-color: red;
max-height: 70px;
}
input[type="submit"]:active {
color: white;
background: red;
border: red;
}
.input-group {
display: inline-block;
margin: 20px 0 20px 0;
position: relative;
}
.input-group input,
textarea {
padding: 15px 0px;
}
textarea {
width: 100%;
}
.errorHighlight {
border: none;
background-color: red;
border-bottom: 2px solid red;
}
.input-group label {
position: absolute;
top: 50%;
left: 0px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-family: "Georgia", "Cambria", "Times New Roman", "Times", serif;
font-style: italic;
font-size: 18px;
color: #999;
pointer-events: none;
-webkit-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s;
}
.input-group input:focus + label,
.input-group input.has-value + label,
.input-group textarea:focus + label,
.input-group textarea.has-value + label {
top: -10px;
font-size: 12px;
color: #aaa;
}
.input-group-submit {
display: flex;
justify-content: space-around;
align-items: center;
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.min.js"></script>
</head>
<body>
<div class="contactUs">
<form class="awesome-form" name="contactForm" action="phpScripts/contactForm.php" method="post">
<div class="contactWho">
<label class="chosenContact">
<input type="radio" name="who" value="Boss" checked>
<img src="http://www.placecage.com/100/100" alt="">
<p class="contactStaffName">Boss Man</p>
</label>
<label class="chosenContact">
<input type="radio" name="who" value="staff1">
<img src="http://www.placecage.com/100/100" alt="">
<p class="contactStaffName">Staff Member 1</p>
</label>
<label class="chosenContact">
<input type="radio" name="who" value="staff2">
<img src="http://www.placecage.com/100/100" alt="">
<p class="contactStaffName">Staff Member 2</p>
</label>
</div>
<div class="sayWhat">
<div class="nameAndEmail">
<div class="input-group">
<input class="formInput" type="text" name="name">
<label class="formLabel">Your Full Name</label>
</div>
<div class="input-group">
<input class="formInput" type="email" name="email">
<label class="formLabel">Your Email Address</label>
</div>
</div>
<div class="input-group">
<textarea class="formInput" name="message" rows="10"></textarea>
<label class="formLabel">How Can I Help You?</label>
</div>
<div class="input-group-submit">
<input type="submit" value="Contact Us">
</div>
</div>
</form>
<div id="errorPanel">
<ul>
</ul>
</div>
</div>
</body>
</html>