I didn't write the form but the css is only 8 lines + bootstraps form control and then some classes for the javascript but I cannot figure out why the place holder text bit, or actually it's parent div, is becoming 60px or so in height, there is only 15px padding top and bottom and then a margin for the placeholder text. I've gone through form-control and there's no styles for height so I just can't figure it out. If you could have a look that'd be great.
http://danceforovariancancer.com.au#perform
Here's the contact form html and it's css but I'd recomend inspecting element because there's no answers in the css as far as I can tell :o
<section id="perform">
<div class="container-fluid apply">
<div class="text-center row">
<h1>Want to perform? Sign up here</h1>
</div>
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<form name="sentMessage" id="contactForm" novalidate>
<div class="col-lg-4">
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Name</label>
<input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Email</label>
<input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Phone</label>
<input type="tel" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number.">
<p class="help-block text-danger"></p>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Message</label>
<textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
</div>
<br>
<div id="success"></div>
<div class="row">
<div class="form-group col-xs-12">
<button type="submit" class="btn btn-success btn-lg">Send</button>
</div>
</div>
</form>
</div>
</div>
</div>
and css
.apply {
background-color: #0094ab;
}
.form-control {
color: #fff !important;
}
.floating-label-form-group {
position: relative;
margin-bottom: 5px;
margin-top: 5px;
/* padding-bottom: .5em; */
border-bottom: 1px solid #eee;/* color: #0094ab; */
}
.floating-label-form-group input, .floating-label-form-group textarea {
z-index: 1;
color: #fff;
position: relative;
padding-right: 0;
padding-left: 0;
border: 0;
border-radius: 0;
font-size: 1.5em;
background: rgba(255, 255, 255, 0.24);
box-shadow: none!important;
resize: none;
}
.floating-label-form-group label {
display: block;
z-index: 0;
position: relative;
top: 2em;
margin: 0;
font-size: .85em;
line-height: 1.764705882em;
vertical-align: middle;
vertical-align: baseline;
opacity: 0;
-webkit-transition: top .3s ease, opacity .3s ease;
-moz-transition: top .3s ease, opacity .3s ease;
-ms-transition: top .3s ease, opacity .3s ease;
transition: top .3s ease, opacity .3s ease;/* color: #fff; */
}
.floating-label-form-group-with-value label {
top: 0;
opacity: 1;
}
.floating-label-form-group-with-focus label {
color: #80bc18;
}
form .row:first-child .floating-label-form-group {
border-top: 1px solid #eee;
}
.form-control::-moz-placeholder {
color: #999;
opacity: 1;
}
.form-control:-ms-input-placeholder {
color: #999;
}
.form-control::-webkit-input-placeholder {
color: #999;
/* font-size: 12px; */
}
You have hidden labels (opacity:0) which takes the space. Actually Opacity:0 hides the element (here: the labels), but reserves the space. You can use display:none instead, to completely hide an element.
I hope this helps.
As others have said the problem is caused by the hidden label.
If you're looking for a quick fix, here's what I would do:
In your mystyles.css add top margin for .form-control.
.form-control {
margin-top: -10px;
}
Apply following changes
label {
opacity: 1 !important;
top:0 !important;
}
.floating-label-form-group input, .floating-label-form-group textarea {
background: rgba(255, 255, 255, 0.54) none repeat scroll 0 0;
border: 0 none;
border-radius: 3px;
box-shadow: none !important;
color: #fff;
font-size: 1.5em;
padding-left: 5px;
padding-right: 0;
position: relative;
resize: none;
z-index: 1;
}
.form-control {
color: #fff !important;
line-height: 1.5;
}
Related
I would like to ask for help on how I can remove the label when the user has typed in their input. When I tested my code, the label overlaps the input that was typed by the user, and that is not what I wanted to happen. I am assuming I'll have to use JavaScript, an event listener? but I am new to coding, the code structure and syntax is really new and what I can only understand are basic logic from how I read codes in html. Would really appreciate the help!
Here is my code
.centered-container-form {
padding-bottom: 25%;
font-size: 18px;
display: flex;
flex-direction: column;
width: 300px;
}
.form-container {
width: 100%;
}
.container{
position: relative;
max-width:245px;
width: 100%;
border-radius:6px;
background-color: #fff;
}
.container .input-box{
position:relative;
height: 50px;
background-color: red;
}
.input-box input{
position:absolute;
outline:none;
height:100%;
width:100%;
border: 2px solid #ccc;
padding: 0 35px 0 15px;
transition: all 0.2s linear;
border-radius:6px;
}
.input-box :is(label, img){
position:absolute;
top: 50%;
transform: translateY(-50%);
color:#999;
transition: all 0.2s linear;
}
.input-box label{
left: 15px ;
pointer-events: none;
font-size: 16px;
font-weight:400;
padding:0px 5px;
}
.input-box img {
right:15px;
height: 20px;
}
input:is(:focus) ~ img{
color:#0890EB;
}
input:is(:focus) ~ label{
color:#0890EB;
background-color: #fff;
top:0;
padding:0px 5px;
font-size: 12px;
}
input:is(:focus){
border-color: #0890EB;
<div className="centered-container-form">
<form onSubmit={handleSubmit}>
<div className='form-container'>
<div className='container'>
<div className='input-box'>
<input type="email" value={email} onChange=
{handleEmailChange} />
<label>
Email/username
</label>
</div>
</div>
<br></br>
<div className="container">
<div className='input-box'>
<input
type="password"
value={password}
onChange={handlePasswordChange}
/>
<label>
Password </label>
</div>
</div>
</div>
</div>
</form>
Try adding placeholder to both your inputs and then add this snippet to your css
HTML:
<div className='container'>
<div className='input-box'>
<input placeholder="email" type="email" value={email} onCh} />
<label>
Email/username
</label>
</div>
</div>
<br></br>
<div className="container">
<div className='input-box'>
<input
placeholder="password"
type="password"
value={password}
onChange={handlePasswordChange}
/>
<label>
Password </label>
</div>
</div>
Css:
input:not(:placeholder-shown) ~ label{
display: none;
}
input:placeholder-shown ~ label{
display: inline;
}
If i correct understood your question, you dont need labelyou need placeholder
so just replace your input like:
<input type="password" placeholder={password} />
I have solved my problem. Just used placeholder and brought back my initial code and replacing type into text/password. Thank you everyone for answering!
I'm creating an ecommerce website and I'm having issue on the pricing of product page based on radio (product) button.
The price is obtain from weight * wesell (wesell is value store in database)
Issue 1 - the price is not displayed when the page is loaded
Issue 2 - the price displayed has lots of decimal point (I tried used number_format("price",2) but it couldn't be displayed)
Below are the codes of the page
code
window.addEventListener('DOMContentLoaded', function() {
const groups = [...document.querySelectorAll(".swatch")].slice(1); // drop the first div
document.getElementById("container").addEventListener("click", function(e) {
const tgtDiv = e.target.closest(".swatch-element")
if (tgtDiv) {
const groupId = tgtDiv.querySelector("input[type=radio]").dataset.group;
groups.forEach(aGroup => aGroup.classList.toggle("hide", groupId !== aGroup.id))
}
});
});
function check() {
$("#swatch-1-9").prop("checked", true);
}
function check2() {
$("#swatch-1-6").prop("checked", true);
}
function check3() {
$("#swatch-1-4").prop("checked", true);
}
function check4() {
$("#swatch-1-1").prop("checked", true);
}
function displayRadioValue() {
var ele = document.getElementsByName('length');
for(i = 0; i < ele.length; i++) {
if(ele[i].checked)
document.getElementById("price").innerHTML
= "RM " + ele[i].value*<?php echo $product['wesell'];?>
;
}
}
.swatch {
margin: 1em 0;
display:flex;
flex-flow: row;
}
.header { width:70px}
.hide { display: none; }
.swatch .header {
margin: 0.5em 0;
}
.swatch input {
display: none;
}
.swatch label {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
float: left;
min-width: 50px;
height: 35px;
margin: 0;
border: #ccc 1px solid;
background-color: #ddd;
font-size: 13px;
text-align: center;
line-height: 35px;
white-space: nowrap;
text-transform: uppercase;
}
.swatch-element label {
padding: 0 10px;
}
.color.swatch-element label {
padding: 0;
}
.swatch input:checked+label {
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8);
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8);
border-color: transparent;
}
.swatch .swatch-element {
float: left;
-webkit-transform: translateZ(0);
-webkit-font-smoothing: antialiased;
margin: 0px 10px 10px 0;
position: relative;
}
.crossed-out {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.swatch .swatch-element .crossed-out {
display: none;
}
.swatch .swatch-element.soldout .crossed-out {
display: block;
}
.swatch .swatch-element.soldout label {
filter: alpha(opacity=60);
-khtml-opacity: 0.6;
-moz-opacity: 0.6;
opacity: 0.6;
}
.swatch .tooltip {
text-align: center;
background: gray;
color: #fff;
bottom: 100%;
padding: 10px;
display: block;
position: absolute;
width: 100px;
left: -23px;
margin-bottom: 15px;
filter: alpha(opacity=0);
-khtml-opacity: 0;
-moz-opacity: 0;
opacity: 0;
visibility: hidden;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
z-index: 10000;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.swatch .tooltip:before {
bottom: -20px;
content: " ";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}
.swatch .tooltip:after {
border-left: solid transparent 10px;
border-right: solid transparent 10px;
border-top: solid gray 10px;
bottom: -10px;
content: " ";
height: 0;
left: 50%;
margin-left: -13px;
position: absolute;
width: 0;
}
.swatch .swatch-element:hover .tooltip {
filter: alpha(opacity=100);
-khtml-opacity: 1;
-moz-opacity: 1;
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
.swatch.error {
background-color: #E8D2D2!important;
color: #333!important;
padding: 1em;
border-radius: 5px;
}
.swatch.error p {
margin: 0.7em 0;
}
.swatch.error p:first-child {
margin-top: 0;
}
.swatch.error p:last-child {
margin-bottom: 0;
}
.swatch.error code {
font-family: monospace;
}
<div class="swatch color clearfix" id="container" data-option-index="0">
<div class="header">
Product
</div>
<div data-value="black" class="swatch-element color black available">
<div class="tooltip">black</div>
<input id="swatch-0-black" checked name="option-0" value="0.96" type="radio" data-group="group1" checked onclick="displayRadioValue() ">
<label for="swatch-0-black" style="background-color: black; background-image: url(./assets/images/black.png)"><img class="crossed-out" src="./assets/images/soldout.png" alt=""></label>
</div>
<div data-value="red" class="swatch-element color red available">
<div class="tooltip">
red
</div>
<input id="swatch-0-red" name="option-0" value="1.34" type="radio" data-group="group2" onclick="check2(),displayRadioValue()">
<label for="swatch-0-red" style="background-color: red; background-image: url(./assets/images/red.png)">
<img class="crossed-out" src="./assets/images/soldout.png" alt="">
</label>
</div>
<div data-value="white" class="swatch-element color white available">
<div class="tooltip">
white
</div>
<input id="swatch-0-white" name="option-0" value="1.48" type="radio" data-group="group3" onclick="check3(),displayRadioValue()">
<label for="swatch-0-white" style="background-color: white; background-image: url(./assets/images/white.png)">
<img class="crossed-out" src="./assets/images/soldout.png" alt="">
</label>
</div>
<div data-value="blue" class="swatch-element color blue available">
<div class="tooltip">
blue
</div>
<input id="swatch-0-blue" name="option-0" value="1.52" type="radio" data-group="group4" onclick="check4(),displayRadioValue()">
<label for="swatch-0-blue" style="background-color: blue; background-image: url(./assets/images/blue.png)">
<img class="crossed-out" src="./assets/images/soldout.png" alt="">
</label>
</div>
</div>
<div class="swatch clearfix" data-option-index="1" id="group1">
<div class="header">
Weight
</div>
<div data-value="small" class="swatch-element small available">
<input id="swatch-1-9" name="length" value="0.96" type="radio" id="group4a" checked onclick="displayRadioValue()">
<label for="swatch-1-9">
0.96g <img class="crossed-out" src="./assets/images/soldout.png" alt="">
</label>
</div>
</div>
<div class="swatch clearfix hide" id="group2">
<div class="header">
Weight
</div>
<div data-value="small" class="swatch-element small available">
<input id="swatch-1-6" name="length" value="1.34" type="radio" onclick="displayRadioValue()">
<label for="swatch-1-6">
1.34g
</label>
</div>
<div data-value="medium" class="swatch-element medium available">
<input id="swatch-1-7" name="length" value="1.44" type="radio" id="group3b" onclick="displayRadioValue()">
<label for="swatch-1-7">
1.44g
</label>
</div>
<div data-value="medium" class="swatch-element medium available">
<input id="swatch-1-8" name="length" value="1.54" type="radio" id="group3c" onclick="displayRadioValue()">
<label for="swatch-1-8">
1.54g
</label>
</div>
</div>
<div class="swatch clearfix hide" id="group3">
<div class="header">
Weight
</div>
<div data-value="small" class="swatch-element small available">
<input id="swatch-1-4" name="length" value="1.48" type="radio" onchange="displayRadioValue()">
<label for="swatch-1-4">
1.48g
</label>
</div>
<div data-value="medium" class="swatch-element medium available">
<input id="swatch-1-5" name="length" value="1.49" type="radio" id="group2b" onclick="displayRadioValue()">
<label for="swatch-1-5">
1.49g <img class="crossed-out" src="./assets/images/soldout.png" alt="">
</label>
</div>
</div>
<div class="swatch clearfix hide" id="group4">
<div class="header">
Weight
</div>
<div data-value="small" class="swatch-element small available">
<input id="swatch-1-1" name="length" value="1.52" type="radio" onclick="displayRadioValue()">
<label for="swatch-1-1">
1.52g
</label>
</div>
<div data-value="medium" class="swatch-element medium available">
<input id="swatch-1-2" name="length" value="1.54" type="radio" onclick="displayRadioValue()">
<label for="swatch-1-2">
1.54g
</label>
</div>
<div data-value="medium" class="swatch-element medium available">
<input id="swatch-1-3" name="length" value="1.57" type="radio" onclick="displayRadioValue()">
<label for="swatch-1-3">
1.57g
</label>
</div>
</div>
<div id="purchase-1293235843">
<div class="detail-price" itemprop="price">
<span class="price" id="price">
</span>
</div>
</div>
for issue 2 use toFixed(2)
e.g.
const amount.toFixed(2) // 408.70
I have a multistep form but the multi-steps doesn't work on mobile it shows all the steps in one go even the success message.
Please help me if possible
The HTML-CSS and javascript code I got it from here:
https://codepen.io/TyStelmach/pen/yNxMeJ
---
The HTML Code
```
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src=
"https://code.jquery.com/jquery-3.2.1.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
type="text/javascript">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
</head>
<div class="info">
<h1>Please fill in the form </h1>
<span>
Made with
<i class="fa fa-beer"></i>
by
AAA Web Agency
<div class="spoilers">
Need “Permission to Contact” language that is TCPA compliant </div>
</span>
</div>
<!-- Modal -info -->
<div class="container">
<div id="modal-3" class="modal" data-modal-effect="slide-top">
<div class="modal-content">
<h2 class="fs-title">Score Index</h2>
<h3 class="fs-subtitle">Getting the most out of your data</h3>
<p>Your data has been successfully submited</p>
<input type="button" name="next" class="next action-button modal-close" value="Got it!">
</div>
</div>
</div>
<form name='form1' class="steps" accept-charset="UTF-8" enctype="multipart/form-data" novalidate="">
<ul id="progressbar">
<li class="active">Step 1</li>
<li>Step2</li>
</ul>
<!-- USER INFORMATION FIELD SET -->
<fieldset>
<h2 class="fs-title">Basic Information</h2>
<h3 class="fs-subtitle">We just need some basic information to begin</h3>
<!-- Begin What's Your User ID Field -->
<div class="hs_firstname field hs-form-field">
<label for="firstname-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">Your 8 digits User ID *</label>
<input id="id" name="user_id" required="required" type="number" onkeyup="GetDetail(this.value)" value="" placeholder="" data-rule-required="true" data-msg-required="Please insert your 8 digits User ID" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<!-- End What's Your User ID Field -->
<!-- Begin What's Your First Name Field -->
<div class="row">
<div class="col-md-6">
<label for="firstname-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">What's your First Name? *</label>
<input id="first_name" name="first_name" required="required" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Please include your first name" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<!-- End What's Your First Name Field -->
<!-- Begin What's Your Last Name Field -->
<div class="col-md-6">
<label for="firstname-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">What's your First Name? *</label>
<input id="last_name" name="last_name" required="required" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Please include your last name" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
</div>
<!-- End What's Your Last Name Field -->
<!-- Begin Address Field -->
<div class="hs_firstname field hs-form-field">
<label for="firstname-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">Your Address *</label>
<input id="address" name="address" required="required" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Please include your address" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<!-- End Adress Field -->
<!-- Begin City Field -->
<div class="row">
<div class="col-md-4">
<label for="firstname-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">City *</label>
<input id="city" name="city" required="required" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Please include your City" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<!-- End City Field -->
<!-- Begin State Field -->
<div class="col-md-4">
<label for="firstname-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">State *</label>
<input id="state" name="state" required="required" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Please include your State" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<!-- End State Field -->
<!-- Begin Zip Field -->
<div class="col-md-4">
<label for="firstname-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">Zip Code *</label>
<input id="zip" name="zip" required="required" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Please include your Zip Code" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
</div>
<!-- End Zip Field -->
<!-- Begin What's Your Email Field -->
<div class="hs_email field hs-form-field">
<label for="email-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">Your E-mail Address? *</label>
<input id="email-99a6d115-5e68-4355-a7d0-529207feb0b3_2983" name="email" required="required" type="email" value="" placeholder="" data-rule-required="true" data-msg-required="Please enter a valid email address." >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<!-- End What's Your Email Field -->
<!-- Begin Total Number of Constituents in Your Database Field -->
<div class="row">
<div class="col-md-4">
<label for="edit-submitted-constituent-base-total-constituents total_number_of_constituents_in_your_database-99a6d115-5e68-4355-a7d0-529207feb0b3_6344">Cell Phone No. *</label>
<input id="cell" class="form-text hs-input" name="cell" required="required" size="60" maxlength="128" type="phone" value="" placeholder="" data-rule-required="true" data-msg-required="Please enter a valid Cell Phone Number" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<!-- End Cell Phone Field -->
<!-- Begin Total Number of Constituents in Your Database Field -->
<div class="col-md-4">
<label for="edit-submitted-constituent-base-total-constituents total_number_of_constituents_in_your_database-99a6d115-5e68-4355-a7d0-529207feb0b3_6344">Office Phone No. </label>
<input id="office_phone" class="form-text hs-input" name="office_phone" required="required" size="60" maxlength="128" type="phone" value="" placeholder="" data-rule-required="false" data-msg-required="Please enter a Office Phone Number" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<!-- End Cell Phone Field -->
<!-- Begin Office Phone Field -->
<div class="col-md-4">
<label for="edit-submitted-constituent-base-total-constituents total_number_of_constituents_in_your_database-99a6d115-5e68-4355-a7d0-529207feb0b3_6344">Home Phone No.</label>
<input id="home_phone" class="form-text hs-input" name="home_phone" required="required" size="60" maxlength="128" type="phone" value="" placeholder="" data-rule-required="false" data-msg-required="Please enter a valid number" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
</div>
<!-- End Office Phone Field -->
<input type="button" data-page="1" name="next" class="next action-button" value="Next" />
</fieldset>
<!-- RETENTION FIELD SET -->
<fieldset>
<h2 class="fs-title">Retention of your donors</h2>
<h3 class="fs-subtitle">How long can you keep your donors and their donations?</h3>
<!-- Begin Monthly Rent Field -->
<div class="form-item webform-component webform-component-textfield hs_number_of_donors_in_year_1 field hs-form-field" id="webform-component-retention--amount-1">
<label for=" edit-submitted-retention-amount-1 number_of_donors_in_year_1-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">Monthly Rent</label>
<input id="monthly_rent" class="form-text hs-input" name="monthly_rent" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="false" data-msg-required="Please enter a valid Monthly Rent">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<!-- End Monthly Rent Field-->
<!-- Begin Length of time at residence? Field -->
<div class="row">
<div class="col-md-6" id="webform-component-retention--amount-1">
<label for=" edit-submitted-retention-amount-1 number_of_donors_in_year_1-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">Length of time at residence? __ yrs.</label>
<input id="residence_yrs" class="form-text hs-input" name="residence_yrs" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="false" data-msg-required="Please enter a valid Monthly Rent">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<!-- End Length of time Field-->
<!-- Begin Length of time at residence? Field -->
<div class="col-md-6" id="webform-component-retention--amount-1">
<label for=" edit-submitted-retention-amount-1 number_of_donors_in_year_1-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">Length of time at residence?___ mos.</label>
<input id="residence_mos" class="form-text hs-input" name="residence_mos" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="false" data-msg-required="Please enter a valid Monthly Rent">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
</div>
<!-- End Length of time mons Field-->
<!-- Begin Age Field -->
<div class="row">
<div class="col-md-6" id="webform-component-retention--amount-1">
<label for=" edit-submitted-retention-amount-1 number_of_donors_in_year_1-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">Age</label>
<input id="age" class="form-text hs-input" name="age" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="false" data-msg-required="Please enter a valid Age">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<!-- End Age Field-->
<!-- Begin Gender Field -->
<div class="col-md-6" id="webform-component-retention--amount-1">
<label for=" edit-submitted-retention-amount-1 number_of_donors_in_year_1-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">Gender</label>
<input id="gender" class="form-text hs-input" name="gender" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="false" data-msg-required="Please enter a valid Monthly Rent">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
</div>
<!-- End Gender Field-->
<!-- Begin Length of time at residence? Field -->
<div class="row">
<div class="col-md-6" id="webform-component-retention--amount-1">
<label for=" edit-submitted-retention-amount-1 number_of_donors_in_year_1-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">Spouse’s Name</label>
<input id="spouse_name" class="form-text hs-input" name="spouse_name" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="false" data-msg-required="Please enter a valid Spouse’s Name">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<!-- End Spouse’s Name Field-->
<!-- Begin Spouse’s Age Field -->
<div class="col-md-6" id="webform-component-retention--amount-1">
<label for=" edit-submitted-retention-amount-1 number_of_donors_in_year_1-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">Spouse’s Age</label>
<input id="spouse_age" class="form-text hs-input" name="spouse_age" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="false" data-msg-required="Please enter a valid Spouse’s Age">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
</div>
<!-- End Spouse’s Age Field-->
<!-- Begin Have you contributed to a 401(k)/403(b)/IRA retirement program in the past year? select -->
<div class="form-item webform-component webform-component-textfield" id="webform-component-retention--percent-change field hs-form-field">
<label for="edit-submitted-retention-percent-change">Retention Rate</label>
<select id="select1" class="form-text hs-input" name="select1" value="" placeholder="0">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<!-- End Have you contributed to a 401(k)/403(b)/IRA retirement program in the past year? select -->
<!-- Begin Best time/day to contact Field -->
<div class="form-item webform-component webform-component-textfield hs_number_of_donors_in_year_1 field hs-form-field" id="webform-component-retention--amount-1">
<label for=" edit-submitted-retention-amount-1 number_of_donors_in_year_1-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">Best time/day to contact:</label>
<input id="best_time" class="form-text hs-input" name="best_time" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="false" data-msg-required="Please enter a valid time">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<!-- End Best time/day to contact Field-->
<input type="button" data-page="5" name="previous" class="previous action-button" value="Previous" />
<input id="submit" class="hs-button primary large action-button next" type="submit" value="Submit">
<div class="explanation btn btn-small modal-trigger" data-modal-id="modal-3">What Is This?</div>
</fieldset>
<fieldset>
<h2 class="fs-title">It's on the way!</h2>
<h3 class="fs-subtitle">Thank you for trying out our marketing grader, please go check your email for your fundraising report card and some helpful tips to improve it!</h3>
<div class="explanation btn btn-small modal-trigger" data-modal-id="modal-3">What Is This?</div>
</fieldset>
```
You have a media query in your CSS that is responsible for exactly that behavior.
#media (max-width:675px){
/*mobile phone: uncollapse all fields: remove progress bar*/
.steps {
width: 100%;
margin: 50px auto;
position: relative;
}
#progressbar{
display:none;
}
/*move error logs */
.error1 {
position: relative;
left: 0 !important;
margin-top: 24px;
top: -11px;
}
.error1:before {
width: 0;
height: 0;
left: 14px;
top: -14px;
content: '';
position: absolute;
border-left: 6px solid transparent;
border-bottom: 8px solid #e62163;
border-right: 6px solid transparent;
}
/*show hidden fieldsets */
.steps fieldset:not(:first-of-type) {
display: block;
}
.steps fieldset{
position:relative;
width: 100%;
margin:0 auto;
margin-top: 45px;
}
.steps .next, .steps .previous{
display:none;
}
.steps .explanation{
display:none;
}
.steps .submit {
float: right;
margin: 28px auto 10px;
width: 100% !important;
}
}
And the CSS code
/*basic reset*/
* {margin: 0; padding: 0;}
html {
height: 100%;
/*Image only BG fallback*/
background: #e9e9e9;
}
body {
font-family: montserrat, arial, verdana;
width: 100%;
overflow-x: hidden;
}
/*form styles*/
.steps {
width: 100%;
margin: 50px auto;
position: relative;
}
.steps fieldset {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 17px 41px -21px rgb(0, 0, 0);
padding: 20px 30px;
border-top: 9px solid #303030;
box-sizing: border-box;
width: 80%;
margin: 0 10%;
/*stacking fieldsets above each other*/
position: relative;
}
/*Hide all except first fieldset*/
.steps fieldset:not(:first-of-type) {
display: none;
}
/*inputs*/
.steps label{
color: #333333;
text-align: left !important;
font-size: 15px;
font-weight: 200;
padding-bottom: 7px;
padding-top: 12px;
display: inline-block;
}
.steps input, .steps textarea {
outline: none;
display: block;
width: 100%;
margin: 0 0 20px;
padding: 10px 15px;
border: 1px solid #d9d9d9;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #837E7E;
font-family: "Roboto";
-webkti-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 14px;
font-wieght: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: all 0.3s linear 0s;
-moz-transition: all 0.3s linear 0s;
-ms-transition: all 0.3s linear 0s;
-o-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;
}
.steps input:focus, .steps textarea:focus{
color: #333333;
border: 1px solid #303030;
}
.error1{
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 0 0 transparent;
-webkit-box-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent;
position: absolute;
left: 105px;
margin-top: -58px;
padding: 0 10px;
height: 39px;
display: block;
color: #ffffff;
background: #e62163;
border: 0;
font: 14px Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
line-height: 39px;
white-space: nowrap;
}
.error1:before{
width: 0;
height: 0;
left: -8px;
top: 14px;
content: '';
position: absolute;
border-top: 6px solid transparent;
border-right: 8px solid #e62163;
border-bottom: 6px solid transparent;
}
.error-log{
margin: 5px 5px 5px 0;
font-size: 19px;
position: relative;
bottom: -2px;
}
.question-log {
margin: 5px 1px 5px 0;
font-size: 15px;
position: relative;
bottom: -2px;
}
/*buttons*/
.steps .action-button, .action-button {
width: 100px !important;
background: #303030;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px auto;
-webkit-transition: all 0.3s linear 0s;
-moz-transition: all 0.3s linear 0s;
-ms-transition: all 0.3s linear 0s;
-o-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;
display: block;
}
.steps .next, .steps .submit{
float: right;
}
.steps .previous{
float:left;
}
.steps .action-button:hover, .steps .action-button:focus, .action-button:hover, .action-button:focus {
background:#444343;;
}
.steps .explanation{
display: block;
clear: both;
width: 540px;
background: #f2f2f2;
position: relative;
margin-left: -30px;
padding: 22px 0px;
margin-bottom: -10px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
top: 10px;
text-align: center;
color: #333333;
font-size: 12px;
font-weight: 200;
cursor:pointer;
}
/*headings*/
.fs-title {
text-transform: uppercase;
margin: 0 0 5px;
line-height: 1;
color: #303030;
font-size: 18px;
font-weight: 400;
text-align:center;
}
.fs-subtitle {
font-weight: normal;
font-size: 13px;
color: #837E7E;
margin-bottom: 20px;
text-align: center;
}
/*progressbar*/
#progressbar {
margin-bottom: 30px;
overflow: hidden;
/*CSS counters to number the steps*/
counter-reset: step;
width:100%;
text-align: center;
}
#progressbar li {
list-style-type: none;
color: rgb(51, 51, 51);
text-transform: uppercase;
font-size: 9px;
width: 50%;
float: left;
position: relative;
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 3px;
margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
/*connector not needed before the first step*/
content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before, #progressbar li.active:after{
background: #303030;
color: white;
}
/* my modal */
.modal p{
font-size: 15px;
font-weight: 100;
font-family: sans-serif;
color: #3C3B3B;
line-height: 21px;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
width: 50%;
max-width: 630px;
min-width: 320px;
height: auto;
z-index: 2000;
visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.modal.modal-show {
visibility: visible;
}
.lt-ie9 .modal {
top: 0;
margin-left: -315px;
}
.modal-content {
background: #ffffff;
position: relative;
margin: 0 auto;
padding: 40px;
border-radius: 3px;
}
.modal-overlay {
background: #000000;
position: fixed;
visibility: hidden;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-moz-transition-property: visibility, opacity;
-o-transition-property: visibility, opacity;
-webkit-transition-property: visibility, opacity;
transition-property: visibility, opacity;
-moz-transition-delay: 0.5s, 0.1s;
-o-transition-delay: 0.5s, 0.1s;
-webkit-transition-delay: 0.5s, 0.1s;
transition-delay: 0.5s, 0.1s;
-moz-transition-duration: 0, 0.5s;
-o-transition-duration: 0, 0.5s;
-webkit-transition-duration: 0, 0.5s;
transition-duration: 0, 0.5s;
}
.modal-show .modal-overlay {
visibility: visible;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
opacity: 0.6;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
/*slide*/
.modal[data-modal-effect|=slide] .modal-content {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-moz-transition: all 0.5s 0;
-o-transition: all 0.5s 0;
-webkit-transition: all 0.5s 0;
transition: all 0.5s 0;
}
.modal[data-modal-effect|=slide].modal-show .modal-content {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
-moz-transition: all 0.5s 0.1s;
-o-transition: all 0.5s 0.1s;
-webkit-transition: all 0.5s;
-webkit-transition-delay: 0.1s;
transition: all 0.5s 0.1s;
}
.modal[data-modal-effect=slide-top] .modal-content {
-moz-transform: translateY(-300%);
-ms-transform: translateY(-300%);
-webkit-transform: translateY(-300%);
transform: translateY(-300%);
}
.modal[data-modal-effect=slide-top].modal-show .modal-content {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
/* RESPONSIVE */
/* moves error logs in tablet/smaller screens */
#media (max-width:1000px){
/*brings inputs down in size */
.steps input, .steps textarea {
outline: none;
display: block;
width: 100% !important;
}
/*brings errors in */
.error1 {
left: 345px;
margin-top: -58px;
}
}
#media (max-width:675px){
/*mobile phone: uncollapse all fields: remove progress bar*/
.steps {
width: 100%;
margin: 50px auto;
position: relative;
}
#progressbar{
display:none;
}
/*move error logs */
.error1 {
position: relative;
left: 0 !important;
margin-top: 24px;
top: -11px;
}
.error1:before {
width: 0;
height: 0;
left: 14px;
top: -14px;
content: '';
position: absolute;
border-left: 6px solid transparent;
border-bottom: 8px solid #e62163;
border-right: 6px solid transparent;
}
/*show hidden fieldsets */
.steps fieldset:not(:first-of-type) {
display: block;
}
.steps fieldset{
position:relative;
width: 100%;
margin:0 auto;
margin-top: 45px;
}
.steps .next, .steps .previous{
display:none;
}
.steps .explanation{
display:none;
}
.steps .submit {
float: right;
margin: 28px auto 10px;
width: 100% !important;
}
}
/* Info */
.info {
width: 300px;
margin: 35px auto;
text-align: center;
font-family: 'roboto', sans-serif;
}
.info h1 {
margin: 0;
padding: 0;
font-size: 28px;
font-weight: 400;
color: #333333;
padding-bottom: 5px;
}
.info span {
color:#666666;
font-size: 13px;
margin-top:20px;
}
.info span a {
color: #666666;
text-decoration: none;
}
.info span .fa {
color: rgb(226, 168, 16);
font-size: 19px;
position: relative;
left: -2px;
}
.info span .spoilers {
color: #999999;
margin-top: 5px;
font-size: 10px;
}
I have the following code:
input[type=text], [type=email], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #555;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #0563bb;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
}
input[type=submit]:hover {
opacity: 0.9;
}
.contactform {
position: relative;
border-radius: 50px;
background-color: #f2f2f2;
padding: 5px;
z-index:2;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom:auto;
margin-top:1%;
width: 100%;
animation-name: gradient;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.contactform:hover {
animation-name: gradient;
animation-duration: 15s;
animation-iteration-count: infinite;
}
.column {
float: center;
width: 50%;
margin-top: 6px;
padding: 20px;
display: block;
margin-left: auto;
margin-right: auto;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 600px) {
.column, input[type=submit] {
width: auto;
margin-top:0;
}
}
<section id="contact">
<div class="container" data-aos="fade-up">
<div class="contactform">
<div style="text-align:center">
<div class="section-title">
<h2><br/>Get In Touch</h2>
</div>
<p>Feel Free To Reach Out To Me Through This Form! </p>
</div>
<div class="row">
<div class="column">
<form name="myform" action="thankyou.html" method="POST">
<label for="firstname">First Name</label>
<input type="text" id="first name" name="firstname" placeholder="Your firstname.." required>
<label for="lastname">Last Name</label>
<input type="text" id="lastname" name="lastname" placeholder="Your last name.." required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your Email.." required>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Lets Collaborate..." style="height:170px" required></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
</section>
So what I am basically looking for is the shake effect when the user submits without entering any inputs.
Expected Output
When the user hits the submit button without entering anything, the border of the box should turn red as well as shake. I just want the boxes of the placeholders to shake and turn red, not the whole element. I tried adding keyframes to make this possible but got stuck since I was not getting the desired output, any suggestions?
In other words, I just would like the first name, last name, email, and subject borders of the boxes to turn red and shake.
Add an event listener for submit that loops through all the input and textarea fields and checks whether they are valid with checkValidity(). If they are not valid, we set their border color to red with the borderColor style attribute and set their animation with the animation style attribute.
To be able to play the same animation over and over again, we can use setTimeout to wait a specified number of milliseconds and then set the animation style attribute back to unset.
document.querySelector('form').addEventListener('submit', function(e) {
var isValid = true;
this.querySelectorAll('input, textarea').forEach(function(f) {
if (!f.checkValidity()) {
isValid = false;
f.style.borderColor = "red";
f.style.animation = "shake 0.82s forwards";
setTimeout(function(){f.style.animation="unset";},820);
}else{
f.style.borderColor = "initial";
//Sets it back to normal if the field is valid
}
})
if (!isValid) {
e.preventDefault();
}
})
input[type=text],
[type=email],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #555;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #0563bb;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
}
input[type=submit]:hover {
opacity: 0.9;
}
.contactform {
position: relative;
border-radius: 50px;
background-color: #f2f2f2;
padding: 5px;
z-index: 2;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: 1%;
width: 100%;
animation-name: gradient;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.contactform:hover {
animation-name: gradient;
animation-duration: 15s;
animation-iteration-count: infinite;
}
.column {
float: center;
width: 50%;
margin-top: 6px;
padding: 20px;
display: block;
margin-left: auto;
margin-right: auto;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 600px) {
.column,
input[type=submit] {
width: auto;
margin-top: 0;
}
}
#keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
<section id="contact">
<div class="container" data-aos="fade-up">
<div class="contactform">
<div style="text-align:center">
<div class="section-title">
<h2><br/>Get In Touch</h2>
</div>
<p>Feel Free To Reach Out To Me Through This Form! </p>
</div>
<div class="row">
<div class="column">
<form name="myform" action="thankyou.html" method="POST" novalidate>
<label for="firstname">First Name</label>
<input type="text" id="first name" name="firstname" placeholder="Your firstname.." required>
<label for="lastname">Last Name</label>
<input type="text" id="lastname" name="lastname" placeholder="Your last name.." required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your Email.." required>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Lets Collaborate..." style="height:170px" required></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
</section>
i was creating a simple form which has two inputs Name and Email on submit if i write numbers in name input then it will show number is not allowed message as like required message same as in email
Fiddle:https://jsfiddle.net/p6ohxxxe/
please help me out of this problem your help will be appreciated
HTML
<div class="form-container">
<form action="" id="my-form" name="myForm">
<div class="form-row">
<div class="input-container">
<label for="name" class="form-label">Name:</label>
<input type="text" class="form-input" name="name" placeholder="Enter your Name">
</div>
</div>
<div class="form-row">
<div class="input-container">
<label for="Email" class="form-label">Email:</label>
<input type="text" class="form-input" name="email" placeholder="Enter your Email">
</div>
</div>
<div class="form-row">
<div class="input-container">
<button type="submit" class="btnSubmit" >Submit</button>
</div>
</div>
</form>
</div>
js
$("form[name='myForm']").validate({
rules: {
name:"required",
email:{
required:true,
email:true
}
},
messages:{
name:"please Enter your Name",
email:"Please Enter a valid Email Address"
},
submitHandler: function(form) {
form.submit();
}
});
css
.form-container{
position: relative;
width: 100%;
padding: 8px;
box-sizing: border-box;
background: rgba(40, 91, 255, 0.24);
margin:30px auto;
max-width: 50%;
}
.input-container{
width: 100%;
height:auto;
padding-bottom: 12px;
}
.form-label{
font-weight: bold;
margin-bottom: 10px;
font-size: 15px;
display: block;
color:#000;
}
.form-input{
display: block;
width: 50%;
height: 35px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.form-row{
position: relative;
width:100%;
padding: 14px;
}
.btnSubmit{
padding: 10px 40px;
position: relative;
background: #31708f;
border-radius: 5px;
outline: none;
box-shadow: none;
color: white;
}
.error{
color:red;
border-color: red;
padding: 3px 2px;
}
I dont know if I understand your question, but using the validate plugin, you can create additional validation rules and use regex as the validation parameter. I'm using this code:
jQuery.validator.addMethod("regex", function(value, element, regexp) {
var re = new RegExp(regexp);
return this.optional(element) || re.test(value);
},"Invalid Data");
And input:
<input required="" data-rule-regex="^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$" title="Enter a valid IPV4" name="ip" type="text">