Develop Reference

How do I add classes during a Parsley js error?

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.

Javascript Logic in Extending Search Bar

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

How to get jQuery validate error class in the input

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

background image in input form field to clear on focus

I am currently trying this logic:
$('input').on('click focusin', function() {
$('.required').hide();
});
But it doesn't seem to be working at all..
This is what the mark-up looks like:
<input type="text" name="Library" id="Library" placeholder="Email Address (again for verification)" data-name="E-mail Address Verification" class="required"/>
the CSS, basically I just want to hide this background image, rather background display none in jQuery / css chaining. or display none to the entire required field... but neither ideologies seem to work.
.field_holder .required {
background: url("../images/required_field_star_bg.png") no-repeat;
background-position: 11px 11px;
}

There is a psuedo class in CSS labelled :focus (as well as a :required and :valid) that allows you to change values for input elements that are in focus.
I have also amended your JavaScript, the issue is that the event you are looking for is simply called focus - you don't even need the click event for this! A focus is always 'into' the element anyhow.
Heres the code:
$('input').on('focus', function() {
$(this).css('border','1px solid red');
});
input:required {
background: url("http://placehold.it/200x200") no-repeat 50% 50%;
}
input:required:focus {
background: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="text" name="Library" id="Library" placeholder="Name" required />

You don't need javascript/jquery for this, you could do it with pure css by using the :focus pseudo-class:
.field_holder .required {
background: url("../images/required_field_star_bg.png") no-repeat;
background-position: 11px 11px;
}
.field_holder .required:focus {
background-image: none;
}

how to make an image work as a check box?

I am working on phone-gap application in dream-weaver
I have 2 divs .pics and .cover
<div class="pics">
<div class="cover"></div>
</div>
the main idea is to change the colour of the cover div and toggle a JS variable between true and false
var checked=false;
$('.pics').click(function(){
CheckToggle();
});
function CheckToggle(){
if(checked==false){
checked=true;
$('.cover').css({"background":"rgba(255,255,255,.5)"});
}
else
checked=false;
}
I click on .pics and nothing happens
I think there is an error in the jquery code
This is what I used after all
$(function(){
$( "#item1" ).bind( "tap", PicCheck );
var checked;
var choosen="#item1";
checked=$(choosen).attr('pcheck');
function PicCheck( event ){
if(checked=="false"){
$(choosen).toggleClass("selected");
checked="true";
}
else if(checked=="true"){
$(choosen).toggleClass("selected");
checked="false";
}
$(choosen).attr('pcheck',checked);
}
});

With some css you can implement a checkbox and radio buttons with pictures. Try this :
<div>
<input id="input-1" class="img-checkbox" type="radio" name="selectTipo">
<label for="input-1" class="">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/128px-HTML5_logo_and_wordmark.svg.png">
</label>
<input class="img-checkbox" type="radio" id="input-2" name="selectTipo">
<label for="input-2">
<img src="http://www.javatpoint.com/images/javascript/javascript_logo.png">
</label>
And in your css :
input.img-checkbox[type=radio], input.img-checkbox[type=checkbox] {
display: none;
}
img{
height:100px;
}
input.img-checkbox[type=radio]+label, input.img-checkbox[type=checkbox]+label {
border: 10px solid transparent;
display: inline-block;
border-radius: 10px;
}
input.img-checkbox[type=radio]:checked+label, input.img-checkbox[type=checkbox]:checked+label {
border: 10px solid #C6ECED;
display: inline-block;
}
See the result in the follow jsfiddle

I'd skip the Javascript and use a label element and the :checked selector.
#example {
visibility: hidden;
width: 0;
}
label {
color: purple;
}
#example:checked + label {
background-color: red;
color: white;
}
The HTML would be like this:
<input id="example" type="checkbox" name="example" value="true">
<label for="example">Example</label>
With this approach you wouldn't need to worry about tracking the checked variable and you can just figure it out normally.
Here's a demo: http://jsbin.com/cirali/1/edit?html,css,output

It is usually most convenient to use additional class for your purpose.
Here is a simple example:
var checked = false;
$('.pics').click(function() {
CheckToggle();
});
function CheckToggle() {
$('.cover').toggleClass('selected');
checked = $('.cover').hasClass('selected');
}
.cover {
background: red;
}
.cover.selected {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pics">
<div class="cover">test</div>
</div>
Edit:
Since you are using jQuery mobie, you might want to try the vclick or tap events instead of the regular click event.

Depending on how you have the elements styled, it might be better to put the action on the .cover element... If the child element .cover is the exact same height and width of the parent element .pics you wont be able to click on .pics