form validation test page

hakimel · hakimel · commit 0218e92c78bd · 2016-03-08T09:22:44.000+01:00
diff --git a/dist/ladda.min.js b/dist/ladda.min.js
diff --git a/js/ladda.js b/js/ladda.js
@@ -3,7 +3,7 @@
  * http://lab.hakim.se/ladda
  * MIT licensed
  *
- * Copyright (C) 2015 Hakim El Hattab, http://hakim.se
+ * Copyright (C) 2016 Hakim El Hattab, http://hakim.se
  */
 /* jshint node:true, browser:true */
 (function( root, factory ) {
@@ -312,9 +312,12 @@
 						var form = getAncestorOfTagType( element, 'FORM' );
 
 						if( typeof form !== 'undefined' ) {
+							// Modern form validation
 							if( typeof form.checkValidity === 'function' ) {
 								valid = form.checkValidity();
-							} else {
+							}
+							// Fallback to manual validation for old browsers
+							else {
 								var requireds = getRequiredFields( form );
 								for( var i = 0; i < requireds.length; i++ ) {
 
@@ -327,7 +330,7 @@
 										valid = false;
 									}
 
-									// Email field validation, otherwise button starts spinning although field is not complete
+									// Email field validation
 									if( requireds[i].type === 'email' ) {
 										valid = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/.test( requireds[i].value );
 									}
diff --git a/test/form.html b/test/form.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+
+		<title>Ladda: Form test</title>
+
+		<link rel="stylesheet" href="../css/demo.css">
+		<link rel="stylesheet" href="../dist/ladda.min.css">
+
+	</head>
+	<body>
+
+		<article class="examples">
+
+			<div class="intro">
+				<h1>Ladda From Validation</h1>
+				<p>
+					This page can be used to test that Ladda does NOT start spinning when submitting an invalid form.
+				</p>
+				<form action="">
+					<input type="email" required placeholder="Email address..." style="font-size: 1em; padding: 14px;">
+					<button type="submit" class="btn btn-primary ladda-button" data-color="green" data-style="expand-left"><span class="ladda-label">Submit</span></button>
+				</form>
+			</div>
+
+		</article>
+		<script src="../dist/spin.min.js"></script>
+		<script src="../dist/ladda.min.js"></script>
+
+		<script>
+			Ladda.bind( 'button[type=submit]' );
+		</script>
+
+		<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
+
+	</body>
+</html>
