Is there a way to validate radio button and checkboxes?

One thing I would like to point out, I'm not sure if anyone has mentioned this yet, but your jquery event handler is not all-inclusive. I have noticed this is a very common mistake with input validation using jQuery. You have the keyup event bound, which handles keystrokes and ctrl+v and ctrl+x, but it does not handle a right click mouse event to cut or paste. To be fully inclusive on your validation, make sure to use the "input" event instead of keyup. It will handle keystrokes, keyboard hotkeys, and mouse events to cut/paste. I also like to throw in the propertychange event as well, just to be thorough. The code will look as follows:

$('.input-group input[required], .input-group textarea[required], .input-group select[required]').on('input propertychange', function() {

...
...
});

How do you validate a field to alphanumeric content? "Validate Text" curiously also accepts !"§$ I want a field to only accept letters and numbers, no -_@ etc. Can you help?

Yo Update on the datepicker code....
just got smash by MySQL Syntax errors when submitting a form...
easy fix however....
just take out the hyphens in the script and html ...change labels and id's etc.,
i.e change date-picker in the script to datepicker
change date-picker-1 in html code to datepicker1 or datepicker2 etc.,

Yo here's the code for multiple datepickers... yep thats right..in the same html page...
one date is a Required Date input and the other two are Optional extra Dates if the user wishes to choose.......
usually find these at hotel booking sites....
can have a hundred if ya like... just change input id numbers

got the code from jsfiddle..... http://jsfiddle.net/jasenhk...
if calendars fall behind inputs just change the z-index... his code doesnt have a z-index... do the following to CSS if probs
.date-form {
margin: 10px;
z-index: 1;
}

<script>
$(".date-picker").datepicker({ dateFormat: "D d M yy", minDate: -0, maxDate: "+11M +10D"});

$(".date-picker").on("change", function () {
var id = $(this).attr("id");
var val = $("label[for='" + id + "']").text();
});
</script>

OK FULL CODE EXAMPLE .... please note the span classes (input-group-addon danger) dont show for some reason
first the REQUIRED INPUT

<div class="form-group">
<label for="date-picker-1" class="control-label">1st Booking Date</label>
<div class="input-group">
<input id="date-picker-1" type="text" class="date-picker form-control" placeholder="Choose Date" aria-label="1st booking date" maxlength="15" required="">
</div>
</div>

<div class="form-group">
<label for="date-picker-2" class="control-label">Optional 2nd Booking Date</label>
<div class="input-group">
<input id="date-picker-2" type="text" class="date-picker form-control" placeholder="Optional - 2nd Date" aria-label="Optional 2nd booking date" maxlength="15">
</div>
</div>

<div class="form-group">
<label for="date-picker-3" class="control-label">3rd Booking Date</label>
<div class="input-group">
<input id="date-picker-3" type="text" class="date-picker form-control" placeholder="Optional - 3rd Date" aria-label="3rd booking date" maxlength="15">
</div>
</div>

PLEASE NOTE# if ya worried about XSS attacks or SQL injection attacks.... the reason why i have maxlength=15 and dateFormat: "D d M yy" ....
is because if you were to have a diff format for i.e, (DD, d MM, yy) Wednesday 30 September 2015 = (27 characters) compared to what i have above...
you will notice that the minimum i have is 14 characters and the maximum i can have is 15 characters with the format of "D d M yy"......
say Sun 1 May 2015 to Mon 30 Sep 2015... leaves less chance for SQL injections etc.,

yo mouse ... sorry for smashing your blog... just sharing bro with the world just like you....
soon they gonna start asking .... what about date inputs... or what about multiple date inputs... ah..arh ...ha

tooo easy mate!!
Ok beginners... if you want to add just one date input...just do the following.....
dont worry i'll provide all the links about the jquery datepicker below so you can manipulate to your liking....

Standard datepicker Code
<script>
$(function() {
$( "#datepicker" ).datepicker({ dateFormat: "D d M yy", minDate: -0, maxDate: "+11M +10D" });
});
</script>

Place inside html page

Date: <div id="datepicker"></div>

For form inputs code look at multiple inputs above this post.

i run a rehearsal recording studio so i dont want people to book yesterday....
the example above shows minDate:-0 and maxDate:"+11M +10D ...............

what that means is they cannot select yesterday and can only select future dates 11Months and 10 Days from now.... cool hey!!
the date format ........... dateFormat: "D d M yy" .....will display Sun 12 Apr 2015

Ok... here are all the links about jquery datepicker i think for now you will ever need......

http://jqueryui.com/datepic...
choose any example and see what happens... cool hey!... then view source to get the code.

http://jqueryui.com/datepic...
do you want the datepicker to slide down or fade in etc.,
PLEASE #NOTE.... their view source code includes a dropdown selection box... which i think you will not want to have in your webpage.....
this link shows animation stuff in a different way... its a bit confusing to me to implement...so i just went with standard script code above

http://api.jqueryui.com/dat...
just a list of options for datepicker.

http://jqueryui.com/datepic...
what format would you like.... the standard i have above is not mention in their selection box....
so go to the next link which displays all options....
http://api.jqueryui.com/dat... ...and or the next one...
http://api.jqueryui.com/dat...

http://jqueryui.com/themero...
what colour or theme would you like.. select Gallery... click on one of the calendar pictures... then choose the download link above....
you dont have to download everything that is selected.... like in the widgets just select datepicker if thats all you want...

once downloaded make sure you upload the jquery custom css file to your server... and in your html page for example....
<link rel="stylesheet" href="css/custom-theme/jquery-ui-1.8.18.custom.css">
<link rel="stylesheet" href="css/latestsourcebootstrap.min.css">

then obviously have your javascripts at bottom of your html....

<script src="js/datepicker/jquery.js"></script>
<script src="js/datepicker/jquery-ui.min.js"></script>
<script src="js/bootstrap.js"></script>

I'll update this later today with an example validating multiple options.

To or @Fabian DM... validate field not required , anyone know !, thanks

try the optional field one... thats why i think mouse put it there because it is NOT a required field....
have a good one

To juukie14 in re of.... Looks great! But !@mydomain.com should be a valid email too ;)

try a regexp like the email regexp... just change dot or underscore or hyphen

mouse's email regexp ....... [a-zA-Z0-9_\.\-]

try changing or adding the exclamation mark to it..... either [a-zA-Z0-9_\.\-\!]

Hi champ
just notice that the span class's go missing in the code after submitting an answer/question to this discussion...(all cool just letting readers know some of the script is missing in my examples).....

if any person wants to have their form inputs with aria-labels and bootstrap tooltips and validation and php echo's...cool... ill show ya.....

this is for the bootstrap framework...
requirements ...obviously bootstrap css ... jquery... and bootstrap.js ... with a tooltip script...

the tooltip script place at bottom of html page or minify/uglify with other javascripts.......
cool script for multiple tips on the one page........

<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>

ok Full CODE example
<div class="form-group">
<label for="password" class="control-label">Password</label>
<div class="input-group" data-validate="length" data-length="8">
<input type="password" class="form-control" id="password" data-container="body" data-toggle="tooltip" title="Min 8 - Max 12 Characters. Letters - Numbers only. No Spaces." data-placement="bottom" name="password" placeholder="Password" aria-label="password" maxlength="12" value="&lt;?php echo $password; ?&gt;" required="">

</div>
</div>

Hi champ

robbo here again... just helping out and giving back to the world....

this ones for Cate
her question was....... Can this work with a max length rather than a minimum?

Tooo easy... following is a password example where you want to have a minimum length of 8 and max-length of 12 say....

just add maxlength text to it in the <input type="password......">

<div class="form-group">
<label for="password" class="control-label">Password</label>
<div class="input-group" data-validate="length" data-length="8">
<input type="password" class="form-control" id="password" name="password" placeholder="Password" maxlength="12" required="">

</div>
</div>

this will change to green once 8 characters are inserted and stay green up to 12 chars.

if you wanted to have a different validation than length.... say to validate password text........
insert into mouse's JS script the following..... and change the data-validate attribute in the html.....
you can still leave the maxlength in as well........(the regexp is letters, numbers only)

} else if ($group.data('validate') == "password") {
state = /^([a-zA-Z0-9])+$/.test($(this).val())

<div class="form-group">
<label for="password" class="control-label">Password</label>
<div class="input-group" data-validate="password">
<input type="password" class="form-control" id="password" name="password" placeholder="Password" maxlength="12" required="">

</div>
</div>

Hi champ

can we have more than 1 validate option (same as what Samuel is asking)
i have jsfiddle with it and it works great... no probs...
but cant get double validation methods on the 1 input....
i can work around it with another js script... but just wondering if we can manipulate your current JS code

something like the following on a username or firstname or bandname input..........
data-validate="username" data-validate="length" data-length="8"

} else if ($group.data('validate') == "username") {
state = /^([a-zA-Z0-9])+$/.test($(this).val())

} else if ($group.data('validate') == "firstname") {
state = /^([a-zA-Z\s])+$/.test($(this).val())

} else if ($group.data('validate') == "bandname") {
state = /^([a-zA-Z0-9\s])+$/.test($(this).val())

plus the length code not added here but in your JS file

Full CODE EXAMPLE (wont work with 2 data-validates)
<div class="form-group">
<label for="username">Validate username</label>
<div class="input-group" data-validate="username" data-validate="length" data-length="8">
<input type="text" class="form-control" name="username" id="username" placeholder="username" required="">

</div>

also the following regexp's work great too....
(for beginners [a-zA-Z0-9] means that the username can only have letters and numbers... (rob1234)
[a-zA-Z\s] means that the firstname can have letters and spaces only allowed (i.e robert john)
[a-zA-Z0-9\s] means that the bandname can have letters.numbers and spaces only allowed (i.e best band in 100 million galaxies)

This is really a beautiful way to implement validation. I have implemented it into an order form. However, not being a programmer and learning it little by little, I really struggle with one function. Maybe someone can help me to fix this:

I have a dropbox like in sample code above (Validate Select). Lets stay with this example. 3 values: Item1, Item2 and Item3
When Item3 is selected, a new textbox "Item3box" should appear underneath the dropbox and an input is required. If selection is changed back to Item1 or Item2, textbox "Item3box" should be hidden, and not anymore required.

I guess, the included animate_form.js from this sample stays the same. How do I have the textfield show up or hide together with the required or not required validation

Greetings

What if we would like validate both length and number?

Hello,
how to mark all inputs as unsuccessed when someone clicks the reset button?

Greetings

Reset the form and then submit it. Since the form should be blank it will error on all fields.

Can this work with a max length rather than a minimum?

validate field not required , anyone know !, thanks

Hello, how can i do to validate a checkbox ? Thanks!

The glyphicons do not change with valid entry. They are always static with the default -danger icon. Below is my html code.
Could u plz help me out ?

<html>

<head>

<script type="text/javascript" src="js/enquiry.js"></script>

<link rel="script" media="screen" href="http://code.jquery.com/jque...">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

<link rel="stylesheet" media="screen" href="css/bootstrap.min.css"/>

<link rel="stylesheet" media="screen" href="css/enquiry.css"/>

<title></title>

</head>

<body>

<div class="container">

<div class="row">

<h2>Input Validation + Colorful Input Groups</h2>

</div>

<div class="row">

<div class="col-sm-offset-4 col-sm-4">

<form method="post">

<div class="form-group">

<label for="validate-text">Validate Text</label>

<div class="input-group">

<input type="text" class="form-control" name="validate-text" id="validate-text" placeholder="Validate Text" required="">

</div>

</div>

<div class="form-group">

<label for="validate-optional">Optional</label>

<div class="input-group">

<input type="text" class="form-control" name="validate-optional" id="validate-optional" placeholder="Optional">

</div>

</div>

<div class="form-group">

<label for="validate-optional">Already Validated!</label>

<div class="input-group">

<input type="text" class="form-control" name="validate-text" id="validate-text" placeholder="Validate Text" value="Validated!" required="">

</div>

</div>

<div class="form-group">

<label for="validate-email">Validate Email</label>

<div class="input-group" data-validate="email">

<input type="text" class="form-control" name="validate-email" id="validate-email" placeholder="Validate Email" required="">

</div>

</div>

<div class="form-group">

<label for="validate-phone">Validate Phone</label>

<div class="input-group" data-validate="phone">

<input type="text" class="form-control" name="validate-phone" id="validate-phone" placeholder="(814) 555-1234" required="">

</div>

</div>

<div class="form-group">

<label for="validate-length">Minimum Length</label>

<div class="input-group" data-validate="length" data-length="5">

<textarea type="text" class="form-control" name="validate-length" id="validate-length" placeholder="Validate Length" required=""></textarea>

</div>

</div>

<div class="form-group">

<label for="validate-select">Validate Select</label>

<div class="input-group">

<select class="form-control" name="validate-select" id="validate-select" placeholder="Validate Select" required="">

<option value="">Select an item</option>

<option value="item_1">Item 1</option>

<option value="item_2">Item 2</option>

<option value="item_3">Item 3</option>

</select>

</div>

</div>

<div class="form-group">

<label for="validate-number">Validate Number</label>

<div class="input-group" data-validate="number">

<input type="text" class="form-control" name="validate-number" id="validate-number" placeholder="Validate Number" required="">

</div>

</div>

<button type="submit" class="btn btn-primary col-xs-12" disabled="">Submit</button>

</form>

</div>

</div>

</div>

</body>

</html>

Hi, sorry this isn't working for you. Your HTML seems fine. found you provide me with a link to a demo page or email me one at rmcintosh (at) remabledesigns (dot) com. I believe the issue might be with the JavaScript and not the HTML.

I have sent u an email. :)

Hope that helps. If you need any thing else please feel free to ask here or though my email!

Sure. Thanks a lot! :) Its working fine now :)

Hi, I used devise gem and then in that I tried use your code in the login page, as it uses form_for as shown below
<div class="panel-body">
<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<fieldset>
<div class="input-group" data-validate="email">

<%= f.email_field :email, autofocus: true ,:placeholder=> "Email", :class=> "form-control" %>

</div>
<div class="input-group" data-validate="length" data-length="5">

<%= f.password_field :password, autocomplete: "off", :placeholder=> "Password", :class=> "form-control" , :id=> "validate-length" %>

</div>
</div>

<div style="font-family: 'Economica', sans-serif;font-size:20px;"><%= f.submit "Sign in", :class => "btn btn-lg btn-success btn-block" %>
<%= render "devise/shared/links" %>
</div>
</fieldset>
<% end %>

Even I enter correct values in login side, its not validating the inputs. What should I need to do regarding this?

do I need to rewrite the JS for it?

First I would like to point out it looks like you are missing '' in your input groups. If adding those do not help could you send me a url to look at. It is really hard to debug without actually seeing any code.

I'm trying to have the validation run when the page first loads. If for instance the fields are used in an "edit" page, with information that was already entered previously, how can I do it so that the checkmarks are shown. I've tried just copying the main jquery function an doing something like $('.input-group').each or $('.input-group input[required], .input-group textarea[required], .input-group select[required]').each but that doesn't seem to work.

I got your back! I have updated the example to include this functionality. Let me know if you need anything else.

Perfect! Works Great! Thanks for the fast reply.

Great snippet!

I have added these lines to validate a date

html>

<div class="form-group">
<label for="completion-date">Completion Date</label>
<div class="input-group" data-validate="date">
<input name="completion-date" type="date" id="completion-date" class="input form-control" required=""/>

</div>
</div>

javascript>

}else if ($group.data('validate') == "date") {
state = /^\d{4}-((0\d)|(1[012]))-(([012]\d)|3[01])$/.test($(this).val())

Just thought I would pass it on. I am building a fairly large production product in meteor and I need to validate this form on the server side as well. If I have time I would like to build an atmosphere package as even the parsley one does not seem to be easy to work with for it. If anyone is interested let me know

I'm novice at JS. What would be the best way of validating the entire form? For instance a button could be disabled until every validation check has passed as good-to-go.

Updating the code to include this functionality. The Example now has a button at the bottom that will be enabled if form is valid. Let me know if there is anything else.

That's really useful, thank you so much.

Everything works fine on bootsnipp but when i try to run it off of here, the glyphicons do not change with valid entry. They are always static with the default -danger icon.
I'm not sure if i am missing a plugin or reference but I have tried everything from the jquery plugin to all of the bootstrap references. Thanks for any help.

Do you get any errors in the console log?

Uncaught ReferenceError: $ is not defined in the below function
$(document).ready(function()

you probably need jquery

I used http://code.jquery.com/jque... but it didn't seem to change anything

Is there a proper order in referencing? I couldn't seem to get the amelia theme to work either. It works locally but when uploaded to the server it doesn't.

Got it to work! I declared jquery at the top of everything and that seemed to do the trick. Any advice on getting amelia theme to work? Might be the same problem?

Glad to see you got it working as for the amelia theme, it is just a css file, you should just have to put it right after your bootstrap css file... should look something like this assuming you are using basic html: <link href="//netdna.bootstrapcdn.com/boo..." rel="stylesheet">

Thanks for the help. I got it all working. First time using bootstrap, so it was a little getting used to. Great design btw!

No problem. Glad you like it. If you haven't yet remember to favorite this snippet. Thanks!

Im not great at javascript. How would i go about getting this to validate a select box? Adding .input-group select[required] into line 2 doesnt help. Selecting any option doesnt change the cross to a tick.

You would also need to add ", change" next to "keyup". I have updated snippet to support select statements, let me know if this was what you were looking for?

That works brilliantly. Exactly what i was looking for. Thanks for the quick reply

No problem. Let me know if you notice anything else.

Beautiful snippet! Will approve ASAP :)

Looks great! But !@mydomain.com should be a valid email too ;)

I just did a quick google search "javascript email verification" if you look at the JS it is pretty easy to create new rules... I really didnt know you could have a special character in your email name.

I didn't know it could till filter_var('!@domain.com', FILTER_VALIDATE_EMAIL) amazed me with a valid result.
Good and simple snippet, me like!

Thank you. Don't forget to favorite it. It makes me all happy inside. haha

Very effective light and beautiful way to validate and use this. Love this and surely going to use in one of my project. Keep the good work man.