Skip to content

Commit

Permalink
Merge pull request #46 from bboyle/names
Browse files Browse the repository at this point in the history
support duplicate name attributes
  • Loading branch information
bboyle committed Apr 8, 2014
2 parents 406d96b + f1606f6 commit 5f018c3
Show file tree
Hide file tree
Showing 8 changed files with 216 additions and 12 deletions.
8 changes: 7 additions & 1 deletion Gruntfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@ module.exports = function( grunt ) {
'http://localhost:8000/test/questions.html?jquery=1.4.4',
'http://localhost:8000/test/submit-suppression.html?jquery=1.4.4',
'http://localhost:8000/test/submit.html?jquery=1.4.4',
'http://localhost:8000/test/duplicate-names.html?jquery=1.4.4',
'http://localhost:8000/test/validationMessage.html?jquery=1.4.4',
// 1.7.2
'http://localhost:8000/test/alert.html?jquery=1.7.2',
Expand All @@ -86,6 +87,7 @@ module.exports = function( grunt ) {
'http://localhost:8000/test/questions.html?jquery=1.7.2',
'http://localhost:8000/test/submit-suppression.html?jquery=1.7.2',
'http://localhost:8000/test/submit.html?jquery=1.7.2',
'http://localhost:8000/test/duplicate-names.html?jquery=1.7.2',
'http://localhost:8000/test/validationMessage.html?jquery=1.7.2',
// 2.1.0
'http://localhost:8000/test/alert.html?jquery=2.1.0',
Expand All @@ -97,6 +99,7 @@ module.exports = function( grunt ) {
'http://localhost:8000/test/questions.html?jquery=2.1.0',
'http://localhost:8000/test/submit-suppression.html?jquery=2.1.0',
'http://localhost:8000/test/submit.html?jquery=2.1.0',
'http://localhost:8000/test/duplicate-names.html?jquery=2.1.0',
'http://localhost:8000/test/validationMessage.html?jquery=2.1.0'
]
}
Expand All @@ -107,7 +110,10 @@ module.exports = function( grunt ) {
jshint: {
gruntfile: {
options: { jshintrc: '.jshintrc' },
src: 'Gruntfile.js'
src: [
'Gruntfile.js',
'*.json'
]
},
src: {
options: { jshintrc: 'src/.jshintrc' },
Expand Down
2 changes: 1 addition & 1 deletion bower.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "form-validation",
"version": "1.0.4",
"version": "1.1.0",
"homepage": "https://github.com/bboyle/form-validation",
"authors": [
"Ben Boyle <[email protected]>"
Expand Down
10 changes: 6 additions & 4 deletions dist/form-validation.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/*! Form validation - v1.0.4 - 2014-04-03
/*! Form validation - v1.1.0 - 2014-04-09
* https://github.com/bboyle/form-validation
* Copyright (c) 2014 Ben Boyle; Licensed MIT */
(function( $ ) {
Expand Down Expand Up @@ -146,10 +146,12 @@
if ( ! invalidFields.cache ) {
invalidFields.cache = {};

} else if ( invalidFields.cache[ this.name ] === true ) {
return false;
} else if ( this.type === 'radio' ) {
if ( invalidFields.cache[ this.name ] === true ) {
return false;
}
invalidFields.cache[ this.name ] = true;
}
invalidFields.cache[ this.name ] = true;

return this.validity && ! this.validity.valid;
}),
Expand Down
4 changes: 2 additions & 2 deletions dist/form-validation.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "form-validation",
"title": "Form validation",
"description": "Validation UI for web forms using the HTML5 constraint validation API",
"version": "1.0.4",
"version": "1.1.0",
"homepage": "https://github.com/bboyle/form-validation",
"author": {
"name": "Ben Boyle",
Expand Down
8 changes: 5 additions & 3 deletions src/form-validation.js
Original file line number Diff line number Diff line change
Expand Up @@ -153,10 +153,12 @@
if ( ! invalidFields.cache ) {
invalidFields.cache = {};

} else if ( invalidFields.cache[ this.name ] === true ) {
return false;
} else if ( this.type === 'radio' ) {
if ( invalidFields.cache[ this.name ] === true ) {
return false;
}
invalidFields.cache[ this.name ] = true;
}
invalidFields.cache[ this.name ] = true;

return this.validity && ! this.validity.valid;
}),
Expand Down
140 changes: 140 additions & 0 deletions test/duplicate-names.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
<!DOCTYPE html>
<html lang="en-AU">
<head>
<meta charset="UTF-8" />
<title>duplicate names in form fields · form validation tests</title>

<!-- Load local jQuery. This can be overridden with a ?jquery=___ param. -->
<script src="../libs/jquery-loader.js"></script>
<!-- Load local QUnit. -->
<link rel="stylesheet" href="../node_modules/qunitjs/qunit/qunit.css" media="screen">
<script src="../node_modules/qunitjs/qunit/qunit.js"></script>
<!-- Load local lib and tests. -->
<script src="../bower_components/html5-constraint-validation-API/dist/html5.constraintValidationAPI.min.js"></script>
<script src="../bower_components/generate-id/dist/generate-id.min.js"></script>
<script src="../src/form-validation.js"></script>
<script src="qunit-lifecycle.js"></script>
<script src="duplicate-names.js"></script>
<!-- Removing access to jQuery and $. But it'll still be available as _$, if
you REALLY want to mess around with jQuery in the console. REMEMBER WE
ARE TESTING A PLUGIN HERE, THIS HELPS ENSURE BEST PRACTICES. REALLY. -->
<script>window._$ = jQuery.noConflict(true);</script>

<style>
body {
padding: 2em;
font-family: sans-serif;
background: #faf7f3;
color: #111;
}

#qunit-fixture {
position: static;
}


.status {
border: 2px solid #fc3;
background: #ffe;
padding: 1em;
}

.invalid {
border: 1px solid red;
}
.alert {
color: red;
}

</style>

</head>

<body>


<div id="qunit"></div>
<div id="qunit-fixture">

<form id="test" action="javascript:">

<ol class="questions">

<li>
<label for="foo">
<span class="label">Foo</span>
<abbr title="(required)">*</abbr>
</label>
<input type="text" name="foo" id="foo" value="" required="required" />
</li>

<li>
<label for="select-foo">
<span class="label">Select foo</span>
<abbr title="(required)">*</abbr>
</label>
<select id="select-foo" name="foo" required="required">
<option value=""></option>
<option value="foo">foo</option>
<option value="0">0</option>
<option value="null">null</option>
<option value="undefined">undefined</option>
</select>
</li>

<li>
<label for="textarea-foo">
<span class="label">Textarea foo</span>
<abbr title="(required)">*</abbr>
</label>
<textarea name="foo" id="textarea-foo" rows="5" cols="50" required="required"></textarea>
</li>

<li>
<fieldset>
<legend>
<span class="label">Radio foo</span>
<abbr title="(required)">*</abbr>
</legend>
<ul class="choices">
<li>
<input type="radio" name="foo" value="foo" id="radio-foo-foo" required="required" />
<label for="radio-foo-foo">Foo</label>
</li>
<li>
<input type="radio" name="foo" value="bar" id="radio-foo-bar" />
<label for="radio-foo-bar">Bar</label>
</li>
<li>
<input type="radio" name="foo" value="" id="radio-foo-BLANK" />
<label for="radio-foo-BLANK">BLANK</label>
</li>
<li>
<input type="radio" name="foo" value="undefined" id="radio-foo-undefined" />
<label for="radio-foo-undefined">undefined</label>
</li>
<li>
<input type="radio" name="foo" value="null" id="radio-foo-null" />
<label for="radio-foo-null">null</label>
</li>
</ul>
</fieldset>
</li>

<li class="footer">
<ol class="submit">
<li>
<strong>
<input type="submit" value="Submit" />
</strong>
</li>
</ol>
</li>
</ol>
</form>

</div>


</body>
</html>
54 changes: 54 additions & 0 deletions test/duplicate-names.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
(function( $ ) {
'use strict';


module( 'environment', lifecycleCVAPI );

test( 'test fields are in test form', 5, function() {

strictEqual( $( 'form#test' ).length, 1, 'form#test is present' );
strictEqual( $( 'input#foo', '#test' ).length, 1, 'form#test contains input#foo' );
strictEqual( $( 'select#select-foo', '#test' ).length, 1, 'form#test contains select#select-foo' );
strictEqual( $( 'textarea#textarea-foo', '#test' ).length, 1, 'form#test contains textarea#textarea-foo' );
strictEqual( $( 'input:radio', '#test' ).length, 5, 'form#test contains 5 radio buttons' );

});

test( 'fields share duplicate name', 4, function() {

strictEqual( $( 'input#foo' ).attr( 'name' ), 'foo', 'input#foo has name foo' );
strictEqual( $( 'select#select-foo' ).attr( 'name' ), 'foo', 'select#select-foo has name foo' );
strictEqual( $( 'textarea#textarea-foo' ).attr( 'name' ), 'foo', 'textarea#textarea-foo has name foo' );
strictEqual( $( 'input:radio[name="foo"]' ).length, 5, '5 radio buttons have name foo' );

});

test( 'fields are required', 4, function() {

strictEqual( $( '[required]' )[ 0 ], $( 'input#foo' )[ 0 ], 'input#foo is the first required field' );
strictEqual( $( '[required]' )[ 1 ], $( 'select#select-foo' )[ 0 ], 'select#select-foo is the second required field' );
strictEqual( $( '[required]' )[ 2 ], $( 'textarea#textarea-foo' )[ 0 ], 'textarea#textarea-foo is a required field' );
strictEqual( $( 'input:radio[required]' ).length, 1, 'radio buttons are required' );

});


module( 'form submission UI', lifecycleCVAPI );

test( 'status message shown on submit', 6, function() {

$( 'form' ).trigger( 'submit' );

var status = $( '.status' );

strictEqual( status.length, 1, '.status element is shown' );
strictEqual( status.find( 'li' ).length, 4, '.status element contains 3 warnings' );
strictEqual( status.find( 'li' ).eq( 0 ).text(), 'Foo: Must be completed', 'correct error for text@name=foo' );
strictEqual( status.find( 'li' ).eq( 1 ).text(), 'Select foo: Must be completed', 'correct error for select@name=foo' );
strictEqual( status.find( 'li' ).eq( 2 ).text(), 'Textarea foo: Must be completed', 'correct error for textarea@name=foo' );
strictEqual( status.find( 'li' ).eq( 3 ).text(), 'Radio foo: Must be completed', 'correct error for :radio@name=foo' );

});


}( jQuery ));

0 comments on commit 5f018c3

Please sign in to comment.