* @returns {Boolean} Boolean value depends on whether or not the input value matches the pattern specified
*/
validateText($el, pattern) {
- // pattern = pattern ? pattern : $el.attr('pattern') ? $el.attr('pattern') : $el.attr('type');
+ // A pattern can be passed to this function, or it will be infered from the input's "pattern" attribute, or it's "type" attribute
pattern = (pattern || $el.attr('pattern') || $el.attr('type'));
var inputText = $el.val();
+ var valid = false;
+
+ if (inputText.length) {
+ // If the pattern attribute on the element is in Abide's list of patterns, then test that regexp
+ if (this.options.patterns.hasOwnProperty(pattern)) {
+ valid = this.options.patterns[pattern].test(inputText);
+ }
+ // If the pattern name isn't also the type attribute of the field, then test it as a regexp
+ else if (pattern !== $el.attr('type')) {
+ valid = new RegExp(pattern).test(inputText);
+ }
+ else {
+ valid = true;
+ }
+ }
+ // An empty field is valid if it's not required
+ else if (!$el.prop('required')) {
+ valid = true;
+ }
- // if text, check if the pattern exists, if so, test it, if no text or no pattern, return true.
- return inputText.length ?
- this.options.patterns.hasOwnProperty(pattern) ? this.options.patterns[pattern].test(inputText) :
- pattern && pattern !== $el.attr('type') ?
- new RegExp(pattern).test(inputText) :
- true :
- true;
+ return valid;
}
/**
--- /dev/null
+<!doctype html>
+<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
+<html class="no-js" lang="en" dir="ltr">
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <title>Foundation for Sites Testing</title>
+ <link href="../assets/css/foundation.css" rel="stylesheet" />
+ </head>
+ <body>
+ <div class="row column">
+ <h1>Abide: Text Fields</h1>
+
+ <p>This form has one required text field and one optional text field.</p>
+
+ <form data-abide novalidate>
+ <input required type="text" placeholder="Required">
+ <input type="text" placeholder="Not required">
+ <button type="submit" class="button">Submit</button>
+ <button type="reset" class="button">Reset</button>
+ </form>
+
+ <hr>
+
+ <p>This field uses a custom pattern. The field is valid if the input is between 4 and 16 characters long.</p>
+
+ <form data-abide novalidate>
+ <input required type="text" pattern="customPattern">
+ <button type="submit" class="button">Submit</button>
+ <button type="reset" class="button">Reset</button>
+ </form>
+ </div>
+
+ <script src="../assets/js/vendor.js"></script>
+ <script src="../assets/js/foundation.js"></script>
+ <script>
+ Foundation.Abide.defaults.patterns['customPattern'] = /^\w{4,16}$/;
+ $(document).foundation();
+ </script>
+ </body>
+</html>
projects / thirdparty / foundation / foundation-sites.git / commitdiff
