Now my form looks like this:
When you click on the send button, if any input is not filled in, then this exclamation mark should come out exactly under the input that is not filled in as here:
Self written verification is not suitable I need to use Parsley
parsely already adds parsley-error class (and style it with red border, background etc.)
If the task is to add the exclamation mark, depends on your design, there are some ways to do it, but I prefer the css only approach.
For doing this, you need to change the html a bit. For every input, this is the html
<span class="input-wrapper">
<input type="text" class="form-control" name="fullname" required="" data-parsley-errors-messages-disabled="" />
<span class="validation"></span>
</span>
The .validation is holds the exclamation mark, and the .input-wrapper is the positioning container (because .validation has position: absolute
And here is the result
$('#demo-form').parsley()
.on('form:submit', function() {
return false; // Don't submit form for this demo
});
.input-wrapper {
position: relative;
display: inline-block;
}
.validation {
position: absolute;
pointer-events: none;
color: red;
top: 0;
right: 5px;
height: 100%;
display: inline-flex;
align-items: center;
display: none;
}
.validation:before {
content: "!";
}
.parsley-error~.validation {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://parsleyjs.org/dist/parsley.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/guillaumepotier/Parsley.js#2.9.2/src/parsley.css" rel="stylesheet" />
<form id="demo-form" data-parsley-validate="">
<label for="fullname">Full Name * :</label>
<span class="input-wrapper">
<input type="text" class="form-control" name="fullname" required="" data-parsley-errors-messages-disabled="" />
<span class="validation"></span>
</span>
<button>Submit</button>
</form>
If your design / html is different than the example, the code above might should be adjusted.
Related
I've created an expanding search bar: You click on the magnifying glass the input extends out and to the right, click it again and it closes. (See Fiddle Below).
I'm new to the world of JS and I thought this would be a great opportunity to implement some logic. Here's what I;m trying to do:
If the search bar is open and the inner.html is empty, if you click the "search" magnifying glass, I want to prevent the default submission of the form and simply close the search bar
If there is text, I want the form to be submitted.
Right now I've got the elements layered in such a way as to when you click the "search" button for the first time, the bar extends and the z-index of the button drops to one where the actual submit button is higher, but I want to control the functionality a little more.
What I've tried:
I tried creating a function that added an event listener that said, basically, if the bar has a width of 700px (the extended length) and the inner html is empty, bring the z-index of the extend button up back higher than the submit simply close the form. But I can't seem to work the logic out properly.
I'm wondering how in JS you can control the z-index.
Here is the code I tried and did not work. I tried something simply like just alerting when the task I wanted to watch for was done first but it doesn't seem to be working.
Any help would be wonderful.
Code:
HTML:
<div id="wrap">
<form id="myForm">
<input id="search" name="search" type="text" placeholder="What are we looking for?" />
<input id="search_submit" value="" type="submit">
</form>
</div>
CSS:
#wrap
{
margin: 50px 100px;
display: inline-block;
position: relative;
height: 60px;
float: right;
padding: 0;
}
input[type="text"]
{
height: 40px;
font-size: 35px;
border: none;
outline: none;
color: #555;
padding-right: 60px;
position: absolute;
width: 0px;
top: 0;
right: 0;
background: none;
z-index: 4;
cursor: pointer;
transition: width .4s ease-in-out;
}
input[type="text"]:focus
{
width: 700px;
z-index: 1;
border-bottom: 1px solid #bbb;
cursor: text;
}
input[type="submit"]
{
position: absolute;
height: 60px;
width: 60px;
display: inline-block;
float: right;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNQTFRFU1NT9fX1lJSUXl5e1dXVfn5+c3Nz6urqv7+/tLS0iYmJqampn5+fysrK39/faWlp////Vi4ZywAAABF0Uk5T/////////////////////wAlrZliAAABLklEQVR42rSWWRbDIAhFHeOUtN3/ags1zaA4cHrKZ8JFRHwoXkwTvwGP1Qo0bYObAPwiLmbNAHBWFBZlD9j0JxflDViIObNHG/Do8PRHTJk0TezAhv7qloK0JJEBh+F8+U/hopIELOWfiZUCDOZD1RADOQKA75oq4cvVkcT+OdHnqqpQCITWAjnWVgGQUWz12lJuGwGoaWgBKzRVBcCypgUkOAoWgBX/L0CmxN40u6xwcIJ1cOzWYDffp3axsQOyvdkXiH9FKRFwPRHYZUaXMgPLeiW7QhbDRciyLXJaKheCuLbiVoqx1DVRyH26yb0hsuoOFEPsoz+BVE0MRlZNjGZcRQyHYkmMp2hBTIzdkzCTc/pLqOnBrk7/yZdAOq/q5NPBH1f7x7fGP4C3AAMAQrhzX9zhcGsAAAAASUVORK5CYII=) center center no-repeat;
border: none;
outline:none;
top: -15px;
right: 0;
z-index: 2;
cursor: pointer;
transition: all .4s ease;
}
JS
var search = document.getElementById("myForm").search;
var search_submit = document.getElementById("myForm").search_submit;
function showOpen()
{
if(search.style.width=="700px")
{
alert("OPEN!");
}
};
search.addEventListener("click", showOpen);
showOpen();
HERE IS THE FIDDLE: https://jsfiddle.net/theodore_steiner/7begmkf3/37/
Your issue can be solved using a few basic JavaScript elements (if you're looking to get into basic logic, these are important to know). The JS uses onsubmit, onclick, and some basic form logic. Basically, when you try to submit the form it checks if the form is empty, and if it is, the program refuses to submit the code. I added the new JavaScript to the HTML file:
<script>
function check(){
value = document.forms["myForm"]["search"].value;
if(value == "" || value == null){
alert("please enter a search term");
return false;
}else{
document.getElementById("myForm").submit();
}
}
</script>
<div id="wrap">
<form id="myForm" onsubmit="return check()">
<input id="searchBar" name="search" type="text" placeholder="What are we looking for?" />
<input id="search_submit" value="" type = "submit">
</form>
</div>
fiddle: https://jsfiddle.net/q1L3Lstx/1/
It might also help in the future to look at the required element: http://www.w3schools.com/tags/att_input_required.asp
I saw a couple of issues with the code.
search and search_submit are pointing to the wrong items they can be like this:
var search = document.getElementById("search");
var search_submit = document.getElementById("search_submit");
You could call a function on submit. like this:
<form id="myForm" onsubmit="myFunction(event)">
finally you can work your code inside that function:
function myFunction(e){
if(search.value.length <= 0){
e.preventDefault();
alert('empty');
}
}
So I have a website with a form with multiple number input boxes that I have adjusted the size of in the style sheet, but what I want is for each number box to have its own width in pixels. I could not find anything on individually changing the width of the boxes since input type number does not listen to the width parameter. Is there a way to make the width in pixels different for each number input box? Or do I have to change them to text input and write a JavaScript function to only accept numbers?
Since your question is very broad, I put together a fiddle showing the 3 common ways I select input elements on "my" pages, this is highly opinionated so there will be multiple different answers, see fiddle: https://jsfiddle.net/5f3pbg8b/3/
And as a quick reference, w3fools has a good list of selectors http://www.w3schools.com/cssref/css_selectors.asp
html example 1
<h4>
With classes best option
</h4>
<input type="text" class="input1"/>
<input type="text" class="input2"/>
<input type="text" class="input3"/>
<input type="text" class="input4"/>
<input type="text" class="input5"/>
CSS example 1
.input1{width: 50px; background: yellow;}
.input2{width: 100px; background: yellow;}
.input3{width: 150px; background: yellow;}
.input4{width: 200px; background: yellow;}
.input5{width: 250px; background: yellow;}
HTML example 2
<h4>
With placeholder value
</h4>
<input type="text" placeholder="input1"/>
<input type="text" placeholder="input2"/>
<input type="text" placeholder="input3"/>
<input type="text" placeholder="input4"/>
<input type="text" placeholder="input5"/>
CSS example 2
input[placeholder="input1"]{width: 50px; background: blue;}
input[placeholder="input2"]{width: 100px; background: blue;}
input[placeholder="input3"]{width: 150px; background: blue;}
input[placeholder="input4"]{width: 200px; background: blue;}
input[placeholder="input5"]{width: 250px; background: blue;}
HTML example 3
<h4>
With nth-child selector
</h4>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
CSS example 3
input:nth-child(14) {
width: 50px;
background: #ff0000;
}
input:nth-child(15) {
width: 100px;
background: #ff0000;
}
input:nth-child(16) {
width: 150px;
background: #ff0000;
}
input:nth-child(17) {
width: 200px;
background: #ff0000;
}
input:nth-child(18) {
width: 250px;
background: #ff0000;
}
You can set the width to a number input field. If you want to individually set input boxes it's good to give them ids like that:
<input id="two" type="number"/>
If you want to select a certain n-th input box you can use a css selector like this:
input[type="number"]:nth-child(3)
If you want to see all this in action check out this JSFiddle.
I am using the jQuery validate plugin and I am running into an issue with how the error messages are displayed. From looking in the developer tools I found that the error message is .error, so I am trying to modify this. I am wanting the error message to display within the input of the field that didn't pass the validation. As you can see in my code, I am wanting the error to be on the right side.
I am doing this for the error:
.error {
color: red;
display: inline !important;
vertical-align: top;
margin-bottom: 5px;
}
label.error {
/*margin-left: 10%;*/
right: 5%;
}
I tried doing this instead of the label.error
input.error {
/*margin-left: 10%;*/
right: 5%;
}
But it didn't help.
Please let me know if I can add more info to this question.
add your style
.error {position : absolute}
End then put margin and padding it to where you want
Update answer
In your site, you should edit html like below
<form action="" autocomplete="on" method="POST" id="project-information-form" novalidate="novalidate">
<div class="input-group">
<input type="text" class="input-borderless error" id="title-roll" name="title" placeholder="Title/Role" aria-required="true">
<label id="title-roll-error" class="error" for="title-roll">Please enter your title</label>
</div>
...
Then you set style .input-group {position : relative} and .error {position : absolute}
If you don't want bound your input and your error to one div, you need calculate your input position by javascript. And in your javascript, you set position for .error element. But I think that way is effortless
$('.login_links_register').click(
function () {
$("body").addClass("removeScroll");
$(".login_form_container").show();
$("#registerForm").show();
$(".login_form_container").css('top', '0px');
/*$('.overlay').addClass('visible');*/
});
$(document).on('click', ".close_button",
function (event) {
var negativeHeight = -1 * ($('.login_form_container').offset().top + $(this).parents('.login_form_container').height());
$(".login_form_container").css('top', negativeHeight);
//$(".login_form_container").slideUp();
/*$('.overlay').removeClass('visible');*/
setTimeout(function () {
$('.overlay').addClass('displayNone');
$(".login_links").removeClass("popup_opened");
$("#loginForm").hide();
$("#registerForm").hide();
$("body").removeClass("removeScroll");
}, 500); /*Execute a set of statements after a statement completion. To make it faster reduce the milliseconds*/
});
input[type="text"], input[type="password"] {
border: 1px solid #aaa;
}
.header2 {
background-color:#E1E3E5;
/*have to change */
/*padding: 15px 0;*/
}
.right {
float: right;
clear:both;
/*To avoid problems caused by float - but check it may cause some problems check for it*/
}
/*Instead overflow:auto(or) hidden*/
.clearboth::after {
clear: both;
content:"";
display: block;
visibility: hidden;
}
.displayNone {
display: none;
}
.emailField, .passwordField {
width: 200px;
padding: 5px;
}
/*to remove unnecessary margin caused by ul element */
.login_links_list {
/*margin:10px 0;*/
padding: 0px;
margin: 0;
}
.login_links.right {
margin-right: 70px;
/*Same as Login container*/
}
/*login_link ul li element*/
.login_links_list_ele, .login_links_list_label
/*can apply al these properties to anchor tag instead li */
{
float: left;
list-style: outside none none;
transition: all 0.5s ease 0s;
}
.login_links_list_label {
padding: 15px;
}
.login_links_register, .login_links_login {
/*border-right:1px solid #ccc;
border-left: 1px solid #ccc;*/
float:left;
padding:15px;
}
.login_form_container.right {
border: 1px solid #aaa;
margin-right: 70px;
/* For better alignment. Instead kissing the edge of the screen*/
transition: all 1s ease 0s;
position: relative;
top: -173px;
/* For Styling. instead displayNone*/
z-index: 2;
}
/*positioning close button*/
.close_button {
cursor: pointer;
float: right;
position: relative;
top: -15px;
right: -15px;
width: 17px;
}
.loginDiv.right {
padding: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="headers header2 clearboth" id="header2">
<nav class="login_links right">
<ul class="login_links_list right">
<li class="login_links_list_label">Are you a member?</li>
<li id="login_links_register" class="login_links_list_ele login_links_register">Register</li>
<li id="login_links_login" class="login_links_list_ele login_links_login">login</li>
</ul>
</nav>
</div>
<div class="login_form_container right displayNone">
<form class="right registerForm" id="registerForm" method="POST" action="lib/registration_validate.php">
<img class="close_button close_popup close_register_form" src="image/close_icon.png"></img>
<div class="register_input">
<input autocomplete="off" class="register_links emailID" type="text" placeholder="Email ID" name="email"/>
</div>
<div class="register_input">
<input type="password" autocomplete="off" class="register_links password" placeholder="Password" name="password"/>
</div>
<div class="register_input">
<input autocomplete="off" class="register_links conf_password" type="password" placeholder="Confirm Password" name="confirmPassword"/>
</div>
<div class="register_submission">
<input type="submit" value="Register" name="submit" class="register_button"></input>
<div class="custom_checkbox_div">
<input id="custom_checkbox" class="custom_checkbox_input" type="checkbox" value="Remember Me" name="remMeCheckbox"/>
<label for="custom_checkbox" class="custom_checkbox_label"></label>
<label class="custom_checkbox_string" for="custom_checkbox">Remember Me</label>
</div>
</div>
This is in my HTML page. I have negative top to show and hide forms for better views.
Please clear me the following doubts
1) I have to send the data to server when user submits form. I do client-side and server-side validation. If client-side validation fails, I 'll show the errors in the form itself. If there is any server-side error, how do i show this in the form?
My ideas:
I have to insert some php error tags in the html page and change my filetype to php from html so that if there is any server side error i ll insert the error in those tags.
<span class="error">* <?php echo $emailErr;?></span>
Something like the above.
(or)
Take the user to another php page where user re-enter the details. and handles all the error in the same page.
2) What are the problems with this type of negative top form design?
Please let me know the problems and suitable solutions so that i get clean design. I don't want the code only the idea.
There are couple of ways to do it but I am gonna stay low here by giving more of a hint to what you can do.
Using AJAX to submit form?
If the validation fails in PHP...
Create an associative array containing all the error messages and a key like submitError set to TRUE.
json_encode the array and die or return it.
In your JavaScript AJAX success callback, check for the existence of submitError key in the response.
If true, parse and display all messages from the JSON response you received. Done!
NOT using AJAX?
You can utilize $_SESSION to store the errors and related messages & set a flag for error.
When the page loads/submits, check if $_SESSION contains that flag.
If it does, pull the messages from session and display to the user.
Once displayed, clear those things from $_SESSION
These things can be done for small applications. If you are using some kind of framework like CodeIgniter or Laravel, you may want to check their session flash methods.
About Negative Top Form Design
I don't see much of a problem there unless it's covering up something vital beneath it when opened. Specially on mobile version( if you plan to do that).
I have a great bit of code that sets the label to 0.5 opacity when the input field is on focus. Now, I'd like to set this to 0 (100% invisibility) if possible.
Can someone help out with this?
Here's my fiddle: http://jsfiddle.net/d8Apy/5/
My HTML:
<div class="fieldgroup">
<label for="name">Name</label>
<input type="text" id="name" name="name">
</div><!--/.fieldgroup-->
My CSS:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: Arial;
}
.fieldgroup {
position: relative;
}
input[type='text'],
label {
padding: 5px;
font-size: 16px;
line-height: 16px;
margin: 0;
height: 30px;
color: #fff;
display: block;
}
input[type='text'] {
border: none;
background: green;
}
I am using this jQuery plugin: http://fuelyourcoding.com/in-field-labels/
Many thanks for any pointers :-)
There is a line of code in the in-field-labels code that says...
$.InFieldLabels.defaultOptions={fadeOpacity:0.5,fadeDuration:300,labelClass:'infield'};
Change this to...
$.InFieldLabels.defaultOptions={fadeOpacity:0.0,fadeDuration:300,labelClass:'infield'};
fadeOpacity:0.5 to fadeOpacity:0.0
When you apply the plugin to your lables you can set the opacity by passing in an options object like so:
$("label").inFieldLabels({ fadeOpacity:0.0 });
Javascript
$(document).ready(function() {
$("#name").focus(function(){
$('#lblname').css({'opacity':'0'});
});
});
EDIT for fade effect
$(document).ready(function() {
$("#name").focus(function(){
$("#lblname").animate({ 'opacity':'0'},350);
});
});
HTML
<div class="fieldgroup">
<label for="name" id="lblname">Name</label>
<input type="text" id="name" name="name">
</div><!--/.fieldgroup-->
There is an html property called placeholder that does that. I'm not sure however that you can apply a fade effect to it. edit: It might be possible with css transitions and this: Change an HTML5 input's placeholder color with CSS, but it's rather horrible.
<input type="text" name="fname" placeholder="First name">
input[name:fname]:active {
color: green
}
While not implemented by every plugin developer, good practice advocates a plugin accepting an options object. While not terribly clear, you are able to override the fadeOpacity and fadeDuration options.
To solve your issue, simply pass in an options object that specifies the fadeOpacity like so:
$(document).ready(function(){
$('label').inFieldLabels({fadeOpacity: 0.0});
});