I added the jQuery validate plugin to validate a contact form I have, but I am running into an issue. I am trying to get my error class to show up inline of the input field in which the error is. However, it is only displaying in block. I know this is because I have display: block !important; for my input class, but if I take that away, it moves my blocks inline whenever there is an error.
Does anyone know how I can resolve this?
Please look in the comments to see a jsfiddle. I was unable to figure out how to insert an external source in the snippet.
<form id="contactform" method="post" action="" novalidate>
<input class="contact_input" type="text" name="name" placeholder="Name">
<input class="contact_input" type="email" name="email" placeholder="Email">
<textarea class="contact_input" name="message" placeholder="Message"></textarea>
<input type="submit" name="submitform" value="Send">
</form>
CSS
.contact_input {
display: block !important;
margin-bottom: 15px;
width: 300px;
}
.error {
color: red;
display: inline;
padding-left: 20px;
}
I think the following CSS works:
.contact_input {
display: block !important;
margin-bottom: 15px;
width: 300px;
}
.error {
color: red;
float: left;
margin-left: 10px;
}
.clear {
clear: both;
padding: 10px;
display: block;
}
Please let me know if it works for you too.
EDIT:
Please let me know if this works: https://jsfiddle.net/wgtLnxfw/6/
It has changes to mark up and css.
You can use the markup and css as below.
Check demo: Fiddle
<form id="contactform" method="post" action="" novalidate>
<div>
<input type="text" name="name" placeholder="Name">
</div>
<div>
<input type="email" name="email" placeholder="Email">
</div>
<div>
<textarea name="message" placeholder="Message"></textarea>
</div>
<div>
<input type="submit" name="submitform" value="Send">
</div>
</form>
#contactform input[type="text"], input[type="email"], textarea {
margin-bottom: 15px;
width: 300px;
float: left;
}
#contactform div {
overflow: auto
}
.error {
color: red;
display: block;
}
Related
I'm a beginner and I'm struggling with a javascript document.
I want to toggle from 'hidden' to 'visible' a block that thanks after submiting a form. But the thing is that my 'thanks block' only appear for a second then disappear.
I've tried it by changing the 'submit' evenement by 'click' and it's working but then the form is not validate. I don't know if know what I mean. Thanks a lot
Here is my JS code:
let merci = document.getElementById('merci');
let button = document.getElementById('frmContact');
button.addEventListener('submit', submit, false);
function submit(){
merci.classList.toggle('visible');
}
merci.addEventListener('click', closeMerci, false);
function closeMerci(){
merci.classList.toggle('visible');
};
Here is the css
#merci{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.9);
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
visibility: hidden;
opacity: 0;
}
#merci #cadreMerci{
background-color: white;
padding: 50px;
margin: 20px 50px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-end;
align-items: center;
}
#merci.visible{
opacity: 1;
visibility: visible;
}
and here is the HTML document :
<form id="frmContact">
<div>
<div>
<label for="fName">Prénom</label>
<input name="fName" id="fName" required autofocus />
</div>
<div>
<label for="lName">Nom</label>
<input type="text" name="lName" id="lName" required />
</div>
<div>
<label for="email">Votre e-mail</label>
<input type="email" name="email" id="email" required />
</div>
</div>
<div>
<div>
<label for="message">Votre message</label>
<textarea name="message" id="message" required></textarea>
</div>
</div>
<button id="buttonSubmit" type="submit">Envoyer</button>
</form>
Given that I have the following html bit:
form p label {
display: block;
float: left;
font-size: 14px;
color: green;
}
#myField.error {
content: 'validation error occurred';
display: block;
}
<form>
<div id="myField">
<p class="required">
<label for="username">Username:</label>
<input type="text" name="username" id="username" class="error" maxlength="10" value="" title="Username" required />
</p>
</div>
</form>
how can I show the validation error message above the input field, floating to the right? I don't want to modify the html code manually. However, adding some span tag using jquery or js is fine. All said, a css solution is preferred.
I made small change to your html, moved the error class from input to p element. And in css used ::before CSS pseudo element (and took the liberty to add a red border for input & red color for error message)
form p label {
display: block;
float: left;
font-size: 14px;
color: green;
}
#myField .error::before {
content: 'validation error occurred';
position: absolute;
top: -4px;
color: red;
}
#myField .error input {
border-color: red;
}
<form>
<div id="myField">
<p class="required error">
<label for="username">Username:</label>
<input type="text" name="username" id="username" class="" maxlength="10" value="" title="Username" required />
</p>
</div>
</form>
JS Fiddle link for this code
how to make two divs horizontal
I gave display: inline-block but not successful
providing my code below
an yo tell me how to fix it
http://codepen.io/anon/pen/vGezoo
<div class ="name-list" >
<input type="button" value="+New"><br>
<div class='gettingValues' style='border:1px solid #000;'> getting form values
<input data-name="edit" type="button" value="Edit" name="editHistory">
<input data-name="delete" type="button" name="deleteHistory" value="Delete">
</div>
</div>
<div class ="contact-details">
<p>ADD OR EDIT CONTACT (FULL NAME)</p>
<form id="localStorageTest" method="post" action="">
<label>Name:</label>
<input type="text" name="name" id="name" class="stored" value="" /><br>
<label>Email:</label>
<input type="email" name="email" id="email" class="stored" value="" /><br>
<label>Message:</label>
<textarea name="message" id="message" class="stored"></textarea><br>
<input type="submit" class="demo-button" value="Submit" />
<button type="reset" value="cancel">Cancel</button>
</form>
</div>
The following style allows to display divs side by side in all browsers:
display: table-cell;
"display: inline-block" have margin-right: 4px. You should css margin-right: -4px
.name-list {
width: 30%;
border: 1px solid green;
display: inline-block;
margin-right: -4px;
}
.contact-details {
width: 70%;
border: 1px solid red;
display: inline-block;
margin-right: -4px;
}
Two issues prevent your inline-block divs from sitting side by side.
Borders
Borders add to the size of your element by default! (GOTHCA!) so in reality your elements are (70% + 2px + 30% + 2px) or (100% + 4px) of your total space! Naturally that won't fit on one line.
This can be fixed by using css box-sizing!
box-sizing: border-box;
or the calc function!
calc(70% - 2px) and calc(30% - 2px)
Text Gaps
The second issue is that inline elements can have gaps between them, because inline-block is modeled after text, gaps between the elements in the html create a gap between elements on the page.
This can be fixed by setting the font-size!
font-size: 0px;
But don't forget to set it back after!
font-size: initial;
Or you can remove the line break between your elements!
<div>
</div><div>
</div>
I am trying to create 2 divs that are next to each other but have a little space in between them. This is the following code that i have and the spacing is to far apart. I can't figure out how to set the spacing:
<style type="text/css">
.formLayout
{
background-color: #f3f3f3;
border: solid 1px #a1a1a1;
padding: 10px;
width: 300px;
border-radius: 1em;
}
.formLayout label, .formLayout input
{
display: block;
width: 120px;
float: left;
margin-bottom: 10px;
}
.formLayout label
{
text-align: right;
padding-right: 20px;
}
br
{
clear: left;
}
.box_header {
font-weight: 600;
color: #000000;
text-align: center;
border-radius: 1em;
}
</style>
<div class="formLayout" style="float:left;">
<div class="box_header">
Account Manager Information
</div>
<label>First Name</label>
<input id="fname" name="fname"><br>
<label>Last Name</label>
<input id="lname" name="lname"><br>
<label>Address</label>
<input id="address1"><br>
<label></label>
<input id="address2"><br>
<label>City</label>
<input id="address2"><br>
<label>State</label>
<input id="zip"><br>
<label>Zip</label>
<input id="zip"><br>
</div>
</div>
<div class="formLayout" style="float:right;">
<div class="box_header">
Client Information
</div>
<label>First Name</label>
<input id="fname" name="fname"><br>
<label>Last Name</label>
<input id="lname" name="lname"><br>
<label>Address</label>
<input id="address1"><br>
<label></label>
<input id="address2"><br>
<label>City</label>
<input id="address2"><br>
<label>State</label>
<input id="zip"><br>
<label>Zip</label>
<input id="zip"><br>
</div>
On your second formLayout, you can do:
style='float:left; margin-left: 20px' instead of floating right: http://jsfiddle.net/33Tma/
Obviously you can change the margin to whatever you need.
Also, you should try to avoid inline styling as much as possible.
Small problem. I want to set the labels to the left infront of the input boxes so they are within the same line.
Any help would be great.
My HTML:
<div class="row">
<div class="col-12">
<label for="fname">First Name</label>
<input type="text" class="form-control input-lg" name="FNAME" id="FNAME">
</div>
</div>
<div class="row">
<div class="col-12">
<label for="lname">Last Name</label>
<input type="text" class="form-control input-lg" name="LNAME" id="LNAME">
</div>
</div>
Jquery I have tried:
$('.row.col-12 label').each(function() {
$(this).insertBefore( $(this).next('input') );
});
What the form looks like:
enter link description here
Some CSS:
form-group {
margin-bottom:15px;
}
.col-12 {
width:100%
}
.input-sm {
height: 30px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
select.input-sm {
height: 30px;
line-height: 30px;
}
textarea.input-sm {
height: auto;
}
.input-lg {
height: 45px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
select.input-lg {
height: 45px;
line-height: 45px;
}
textarea.input-lg {
height: auto;
}
I'm trying to understand your problem but simply put your DOM into the fiddle, each label is in the same line as each textbox.
jsfiddle.net/TWfDs
But if you meant that first name and last name should be in the same one line, you can try below.
$(".row").css({"display":"inline-block"});
http://jsfiddle.net/TWfDs/1/
----- update ----
If you can still style via js and it is acceptable to set the static width for the textbox then label and textbox line up.
http://jsfiddle.net/TWfDs/10/
$("#FNAME").css({"display":"inline-block", "width":"300px"});