css show validation message above the input field - javascript

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

Related

TextBox in Bootstrap 5

Can some one help me out to design below textbox using Bootstrap 5 or only with plane css class textbox
TextBox should be responsive
OnPage load textbox should be with placeholder
<div class="form-outline">
<input type="text" id="form1" class="form-control" />
<label class="form-label" for="form1">Example label</label>
</div>
onclick on textbox it label should get upside
Follow this codepen:
::-webkit-input-placeholder {
direction: rtl;
}
fieldset.form-group {
position: relative;
}
label {
position: absolute;
top: .6rem;
left: 1rem;
transition: all .1s ease-in-out;
cursor: text;
}
:focus + label {
color: #66afe9;
top: -.9rem;
background: white;
}
<fieldset class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
<label for="exampleInputEmail1">Email address</label>
<small class="text-muted">We'll never share your email with anyone else.</small>
</fieldset>

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>

Getting an error message to show up inline of input

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

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

Placing static text at the end of an input field using HTML

What I'm trying to do is place a static piece of text at the end of a input field. Not a placeholder, the idea is to have something like "#gmail.com" at the end of an input element field using HTML and CSS. My question is how could this be accomplished? I got the idea from the bootstrap validation states icons.
For example the input field would look like..
I hope this makes sense.. If you have any questions feel free to ask.
This text should stay static as the user types, which is what seperates it from a input field.
Here's some code that I have:
<form id="loginForm">
<fieldset>
<legend>Login</legend>
<div class="form-group">
<input id="usernameField" class="loginField form-control" name="username" type="text" placeholder="john.doe" required>
</div>
<br>
<div class="form-group">
<input id="passwordField" class="loginField form-control" name="password" type="password" placeholder="password" required>
</div>
<br>
<span class="visible-lg">
<button class="btn btn-danger loginBtn"><i class="fa fa-signin"></i> Login <i class="fa fa-spinner icon-spin icon-white loginSpinner"></i></button>
</span>
<span class="hidden-lg">
<button class="btn btn-danger loginBtn btn-large"><i class="fa fa-signin"></i> Login <i class="fa fa-spinner icon-spin icon-white loginSpinner"></i></button>
</span>
<br>
</fieldset>
</form>
My css:
.loginSpinner{
display: none !important;
}
#badLogin{
display: none;
}
#badRequest{
display: none;
}
#createAccountForm{
display: none;
}
.createSpinner{
display: none !important;
}
#forgotPassword{
display: none;
color: red;
}
#usernameField:before{
content:"#gmail.com";
background-color:yellow;
color:red;
font-weight:bold;
}
JSFiddle: http://jsfiddle.net/UMBRd/
Here's some stuff to get you going, essentially you'll need to wrap the input in a div and adjust it's width to be the same as the input's (I did this by floating the div, but there are other ways). This will give you a coordinate system to place a pseudo-element in with your desired text.
HTML
<div class="input-container">
<input type="text"/>
</div>
CSS
.input-container {
position: relative;
float: left;
}
.input-container:after {
position: absolute;
right: 0;
top: 0;
content: '#gmail.com';
}
See this fiddle.
Note, the pure CSS way with pseudo-elements won't work as discussed in this post.
The only thing I can think of would be to use absolute and relative positioning to overlay the input on top of the span. It's not perfect and I had to play around with the line-height a bit, but this might be enough to get you started:
HTML
<div>
<span>#gmail.com</span>
<input type="text" />
</div>
CSS
div {
position: relative;
}
span {
display: inline-block;
width: 200px;
position: relative;
line-height:95px;
text-align:right;
}
input {
position: absolute;
left: 10px;
top: 35px;
background-color: transparent;
width:200px;
height: 20px;
}
http://jsfiddle.net/pemep/

Categories