Develop Reference

Validate two forms inside one form element with ParsleyJS

I'm building two forms which will live on a single page on a Kentico website. kentico websites are wrapped in one single form field so I can't create individual form elements for each form on the page. The problem is parsleyJS will only allow you to pass a form to initialise it e.g. $("#form").parsley(); and I need to validate the forms independent of each other. Has anyone had this issue before? Can anyone recommend a workaround.
$("#form").parsley();
input{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.8.1/parsley.min.js"></script>
<form action="" id="form">
<div class="form1">
<label for="fname">First Name</label>
<input type="text" name="fname" required>
<label for="lname">Last Name</label>
<input type="text" name="lname" required>
<input type="submit" value="submit">
</div>
<div class="form2">
<input type="text" name="anotherInput" required>
<input type="submit" value="submit">
</div>
</form>

You may be able to get the results you want using the group option to validate only part of the fields in your form. This is used in this example of a multi step form.

Initialize the forms independent of one another by using the class selector.
$(".form1").parsley();
$(".form2").parsley();

autocomplete='off' does not work in Firefox?

I have an input field <input type='text' name='user' autocomplete='off'> but autocomplete is still active.
This is what I see when I inspect the element
It seems that Firefox somehow thinks that this field is a password field and uses the build-in Login Manager storage module. I did not use any Javascript on this input element.
I also noticed a strange key symbol at the autocomplete drop-down list
How can I get rid of that key symbol and disable autocomplete?
Heres my HTML Code
<form class='clearfix'>
<div id='loginForm'>
<label>
Login
<span>
<a href='/memberArea/lostPass.php' id='hackB'>
Forgot Password? Click here!</a></span>
</label>
<input type='text' name='user' id='username' autocomplete="off">
<label >Password </label>
<input type='password' name='pass' id='passLogin' autocomplete="off">
</div>
<button class='confirmbutton' id='loginButton'>Login</button>
</form>

Clear browser, Try,
<!--
<form autocomplete="off"> will turn off autocomplete for the form in most browsers
except for username/email/password fields
-->
<form autocomplete="off">
<!-- fake fields are a workaround for chrome/opera autofill getting the wrong fields -->
<input id="username" style="display:none" type="text" name="fakeusernameremembered">
<input id="password" style="display:none" type="password" name="fakepasswordremembered">
<!--
<input autocomplete="nope"> turns off autocomplete on many other browsers that don't respect
the form's "off", but not for "password" inputs.
-->
<input id="real-username" type="text" autocomplete="nope">
<!--
<input type="password" autocomplete="new-password" will turn it off for passwords everywhere
-->
<input id="real-password" type="password" autocomplete="new-password">
</form>

Replace form with another form on button click

I have 2 forms. I want when button is clicked to show another form on first form position. So just to replace that form.
Form 1
<div id="right">
<form id="contact" class="visible" action="" method="post">
<fieldset>
<input name="fname" placeholder="Ime" type="text" tabindex="1" required>
</fieldset>
<fieldset>
<input name="lname" placeholder="Prezime" type="text" tabindex="2" required>
</fieldset>
<fieldset>
<input name="tel" placeholder="Telefon" type="text" tabindex="2" required>
</fieldset>
<fieldset>
<input name="email" placeholder="Email" type="email" tabindex="2" required>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Pošalji</button>
</fieldset>
</form>
</div>
Form 2
<div id="form2">
<form id="contact2" action="" method="post">
<fieldset>
<input name="fname" placeholder="Ime" type="text" tabindex="1" required>
</fieldset>
<fieldset>
<input name="lname" placeholder="Prezime" type="text" tabindex="2" required>
</fieldset>
<fieldset>
<input name="tel" placeholder="Telefon" type="text" tabindex="2" required>
</fieldset>
<fieldset>
<input name="email" placeholder="Email" type="email" tabindex="2" required>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Pošalji</button>
</fieldset>
</div>
jQuery
$("#contact-submit").on("click", function() {
$("#contact").removeClass("visible");
$("#form2").addClass("visible");
});
So for some reason this is not working. Please help me to solve this. I tried to set opacity:0; of first form but it doesn't work. And please let me know which libary is should use.
Here is my example: http://codepen.io/anon/pen/PzKaPa

EDIT: So I looked at your pen and fixed it so it works: http://codepen.io/anon/pen/OXjEQd
It looks like you'll need to do a couple of things, one of which you might have already: first, place your jquery in a ready function (and make sure you've linked a jquery version in your head tag)--
$(function(){
// your code
});
Then, in your click handler, add a preventDefault():
$('#contact-submit').on('click',function(e){
e.preventDefault();
// rest of code
});
e.preventDefault() keeps your submit button from doing it's default action--submitting the form. This lets you perform other actions with the button. If you don't include this, the very first thing that will happen when your button is clicked is form submission, and you'll not get to any of the other code inside your click event.
This also assumes you have a .visible class defined in your css. If not, you'll need to add that as well, or instead of using addClass and removeClass, you'll need to change the display property on the form directly:
$('#contact').css('display','none');
$('#form2').css('display','block');

Unless you have defined the class visible somewhere else (and have set the CSS defaults for your forms to be hiddne, adding or removing it will have no effect.
Instead, I'd recommend you directly change the display property of the two:
$("#form2").css("display", "none"); // so it's initially invisible
$("#contact-submit").on("click", function() {
$("#contact").css("display", "none");
$("#form2").css("display", "");
});
This will directly alter the style attribute on each element, causing them to hide or show. Using css("display", "") will remove the setting.
You might also look into the hide and show methods in jQuery as they can do the same thing, only with a nice animation.

Unless you have specific CSS that applies to elements with or without the class 'visible', removing and adding that class to the elements will do nothing.
You may want to try
$("#contact-submit").on("click", function() {
$("#contact").toggle();
$("#form2").toggle();
});
to toggle form visibility, and you can initially apply visibility on the forms using CSS or built-in jQuery classes.

How to use Twitter Boootstrap's form validation tooltip messages?

First of all, I am not asking about using Bootstrap's javascript guide to write tooltips from scratch which is in the docs.
I recently used type="email", along with v3.3.1. It automatically validated and showed awesome tooltips for wrong email. I am looking to extend this to custom fields (type="text" and so on) with least amount of code. Looking at Bootstrap's docs, I didn't find any such documentation.
I am wondering it I can use something that resembles formvalidation.io for validation without writing a ton of javascript combined with above tooltip style.
I can do javascript, but if there's a better way, I would like to know.
Right now, my form is extremely simple, no tooltip Javascript and this works:
<form ng-submit="submit()">
<!--<input type="hidden" name="_token" value="{{ CSRF_TOKEN }}">-->
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" ng-model="data.email" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" ng-model="data.password" id="exampleInputPassword1" placeholder="Password">
</div>
</form>

you can change/edit the message of the tooltip using pattern
<input type="text" pattern="[a-zA-Z]+"
oninvalid="setCustomValidity('Enter a letter from the english alphabet ')"
onchange="try{setCustomValidity('')}catch(e){}" />
Good Link on patterns right here: it has time and a lot of data types patterns

If you use type="email" the tooltips you see are generated by the browser.

Display Jquery .slide() form when Javascript is off in browser

I created a form for users to register to my site, it uses Jquery to slide the form into view.
I just decided to turn off JavaScript in the browser to see if my PHP form validation is working properly, but the form is not being displayed is this to do with me setting the form element with CSS (display: none), or is their a tag that needs to be used within the HTML for this situation ?
<form class="form" method="post" action=register.php id="register">
<fieldset>
<label for="username">Username</label>
<input type="text" size="30" name="username" id="username" />
<br/>
<label for="email">Email</label>
<input type="text" size="30" name="email" id="email" />
<br/>
<label for="password">Password</label>
<input type="password" name="password" id="password" />
<br/>
<label for="confirm paassword">Confirm Password</label>
<input type="password" name="password1" id="password1" />
<br/>
<input type="submit" name="submit" id="submit" value="Register" />
</fieldset>
</form>
CSS style
#register{
display: none;
Jquery
$(document).ready(function(){
$('#register').slideDown(800);
}
All three files are external.

Invert your idea. Use js to hide the form for those with js turned on.

If you are changing from display: none with JS it'll not be visible without JS.
Try to use <noscript> to show form or link to register page (eg. with nojs param) to handle cases when user got JS disabled.

Yes, it should be because of setting display: none on the form element.

You should add tag to handle situation when you don't have javascript. However though keep in mind that you'll have to reload page to show the form in such situation...

javascript and css are not strictly releated, so "display: none" is hiding your form
change the display value from none to visible (un-none) in the onload event

Have JS hide the form. Or use feature detection such as modernizr to see if JS is supported then only apply the style where it is. Eg .js #myform {display:none;}