.control-group will get this class if an error is found. Can be set to anything you like, but error, info, warning, or success makes the most sense with bootstrap.
+ td The .form-group will get this class if an error is found. Can be set to anything you like, but error, info, warning, or success makes the most sense with bootstrap.
tr
td submitBtnSelector
td String
@@ -291,8 +275,8 @@ html
tr
td groupSelector
td String
- td '.control-group'
- td The selector for something surrounding your input elements. Like .control-group in bootstrap forms.
+ td '.form-group'
+ td The selector for something surrounding your input elements. Like .form-group in bootstrap forms.
h2#notes Notes
@@ -300,21 +284,21 @@ html
h3#radio Radio buttons
p These can be a bit tricky to validate, so here's an example.
pre.prettyprint.lang-html.linenums
- | #bar on line 4 though. To validate for presence on these fields, we don't need the #bar, we just do
pre.prettyprint.lang-js.linenums
| var metrics = [
@@ -412,4 +396,21 @@ html
include examples/ex3
include examples/ex4
+ .container
+ footer.text-center Nod
+
+ script(type='text/javascript').
+ $(function() {
+ var see_code = $('',
+ {html:"See code", class:"btn btn-sm btn-warning see-code" }
+ ).on( 'click', function() {
+ $(this).next('.code').trigger('tgl');
+ });
+ $( 'form' ).on( 'submit', submitForm = function( e ) { e.preventDefault(); } ).after( see_code );
+ $( '.code' ).on( 'tgl', function() {
+ el = $(this);
+ el.is(':visible') ? el.slideUp() : el.slideDown();
+ });
+ });
+
script !function($) { $(function(){ window.prettyPrint && prettyPrint() }) }(window.jQuery);
diff --git a/dev/test.jade b/dev/test.jade
index d424c48..5a1158c 100644
--- a/dev/test.jade
+++ b/dev/test.jade
@@ -1,13 +1,13 @@
-!!! 5
+doctype html
html
head
meta(charset="utf-8")
title Testing Nod
- link(href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css",rel="stylesheet")
- script(src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js")
- script(src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js")
- style
- body {margin-bottom:100px}
+ link(href="test/components/bootstrap/dist/css/bootstrap.min.css",rel="stylesheet")
+ script(src="test/components/jquery/dist/jquery.min.js")
+ script(src="test/components/bootstrap/dist/js/bootstrap.min.js")
+
+ style(type='text/css').
.nod_msg {
font-weight: bold;
margin-left: 5px;
@@ -15,61 +15,50 @@ html
body
-
-
-
.container
-
-
+ h4 Compiled at #{compiledAt}
fieldset
legend The testing facility
- form(action="foo.html")#form.form.form-horizontal
+ form(action="foo.html")#form.form-horizontal
//
- .control-group
- .controls
+ .form-group
label.radio
- input(type='radio',name='a',value='a1')#bar
+ input.form-control(type='radio',name='a',value='a1')#bar
| First
label.radio
- input(type='radio',name='a',value='a2')
+ input.form-control(type='radio',name='a',value='a2')
| Second
label.radio
- input(type='radio',name='a',value='a3')
+ input.form-control(type='radio',name='a',value='a3')
| Third
+ .form-group
+ label.control-label.col-sm-2 One
+ .col-sm-10
+ input.form-control(type="text",autofocus)#one
- .control-group
- .control-label
- label One
- .controls
- input(type="text",autofocus)#one
-
-
- .control-group
- .control-label
- label Label two
- .controls
- input(type="text")#two
-
-
- .control-group
- .control-label
- label Label three
- .controls
- input(type="text")#three
+ .form-group
+ label.control-label.col-sm-2 Label two
+ .col-sm-10
+ input.form-control(type="text")#two
- .controls
- button(data-loading-text="loading...",type="submit")#submit_btn.btn.btn-success Go go!
+ .form-group
+ label.control-label.col-sm-2 Label three
+ .col-sm-10
+ input.form-control(type="text")#three
+ .form-group
+ .col-sm-offset-2.col-sm-10
+ button(data-loading-text="loading...",type="submit")#submit_btn.btn.btn-success Go go!
//
script(src='nod.min.js')
script(src="checker.js")
script(src="listener.js")
script(src="msg.js")
- script(src="nod.js")
+ script(src="nod-#{nodVersion}.min.js")
script(src="init.js")
script(src="dev/test_nod.js")
diff --git a/index.html b/index.html
index 0636287..336512b 100644
--- a/index.html
+++ b/index.html
@@ -3,23 +3,24 @@
Writing frontend validation for forms is painfully boring. So I made this in the hopes that it will help make it a little less agonizing for you.
It's designed to
@@ -84,17 +65,14 @@While it isn't strictly Bootstrap dependent, it defaults to the structure that bootstrap uses for its forms. However it should be flexible enough to accomodate most any structure.
Comments, bugs, suggestions and ideas are all very much appreciated.
-
- The plugin is made as a jQuery plugin and is activated like this: $("#form").nod( metrics ); The metrics is a list that you build beforehand. It is basically a list of each selector and how you want it validated.
-
The plugin is made as a jQuery plugin and is activated like this: $("#form").nod( metrics ); The metrics is a list that you build beforehand. It is basically a list of each selector and how you want it validated.
Example:
var metrics = [ [ '#foo', 'presence', 'Cannot be empty' ], [ '#bar', 'min-length:4', 'Must be at least 4 characters long' ] ]; - -$( "#form" ).nod( metrics );+ +$( "#form" ).nod( metrics );
Each "sublist" consists of three parts:
.control-group will get this class if an error is found. Can be set to anything you like, but error, info, warning, or success makes the most sense with bootstrap..form-group will get this class if an error is found. Can be set to anything you like, but error, info, warning, or success makes the most sense with bootstrap..control-group in bootstrap forms..form-group in bootstrap forms.These can be a bit tricky to validate, so here's an example.
-<div class="control-group">
- <div class="controls">
- <label class="radio">
- <input type="radio" name="a" value="a1" id="bar"> First
+ <div class="form-group">
+ <div class="controls">
+ <label class="radio">
+ <input type="radio" name="a" value="a1" id="bar"> First
</label>
- <label class="radio">
- <input type="radio" name="a" value="a2"> Second
+ <label class="radio">
+ <input type="radio" name="a" value="a2"> Second
</label>
- <label class="radio">
- <input type="radio" name="a" value="a3"> Third
+ <label class="radio">
+ <input type="radio" name="a" value="a3"> Third
</label>
</div>
</div>
<!-- ... -->
-<button data-loading-text="loading..." type="submit" class="btn btn-success">Submit form</button>
+<button data-loading-text="loading..." type="submit" class="btn btn-success">Submit form</button>
Pretty standard html. Notice the #bar on line 4 though. To validate for presence on these fields, we don't need the #bar, we just do
var metrics = [
['[name=a]', 'presence', 'You must click on at least one radio button']
];
-
-$( "#form" ).nod( metrics );
+
+$( "#form" ).nod( metrics );
However if we want people to specifically click on a particular radio button, we do (line 2 is still important)
var metrics = [
['[name=a]', 'presence', 'You must click on at least one radio button'],
['#bar', 'exact:a1', 'You must click on *this* radio button']
];
-
-$( "#form" ).nod( metrics );
+
+$( "#form" ).nod( metrics );
Conversely we can use the keyword not instead of exact.
Notice name attribute is mandatory on the input fields for all of these.
Yes, it works. Here's some code:
var getFn = function( value ) {
- return $.get('check_email.php', value);
+ $.get('check_email.php', value);
};
-
+
var metrics = [
['#email', getFn, 'This email is already in use']
];
-
-$( "#form" ).nod( metrics );
+
+$( "#form" ).nod( metrics );
Nod.js will take whatever response it gets from the server and eval it (if possible) to a boolean and use that as an indicator for whether the input is valid. This means that a "truthy" responses like "true", 1, true, "foo" will all return true (the field is valid) and conversely "false", 0, false will return false and be interpreted as if the field is not valid.
Also, if your submit button has data-loading-text, this will be swapped while the check is going on if it was initiated by a click of that button (and swapped back when done, regardless of errors).
Notice This feature is all very beta'ish and kind of hard to test fully. So if you find any errors or things that could be handled more gracefully, then I'd appreciate the feedback.
+Notice This feature is all very beta'ish and kind of hard to test fully. So if you find any errors or things that could be handled more gracefully, then I'd appreciate the feedback.
Don't use this. Validating emails should be done backend (by sending an email) and not frontend. I've used the most lax regex for checking emails that I could find (RFC822) so as to err on the side of letting too many emails through rather than rejecting valid emails; but really, you ought not to use frontend email validation at all.
That said, the ones who write the code are not always the ones who get to decide which features to implement, so I've included the feature regardless of what I think about its use. Hope it makes your life a little better.
@@ -317,7 +295,7 @@var submitFn = function( event, data ) {
console.log( data );
}
-
+
$( '#form' ).on( 'silentSubmit', submitFn );
This is used mainly (only?) if you want to submit your form by ajax.
As you can see, you'll get an object with the element (actually the $(el)) and one with the error message.