Getting an error message to show up inline of input - javascript

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

addEventListener(submit) and toggle('visible') function

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>

css show validation message above the input field

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

display inline block not making divs horizontals

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>

2 Divs next to each other with little spacing in between

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.

Jquery, ordered form input and label with DOM

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"});

Categories