Adding additional support for polyfills in Zikula core #2377

shefik · 2015-03-29T03:23:16Z

Adding additional support for polyfills in Zikula core. Also, enabling polyfill in the User Registration form.

Q	A
Bug fix?	no
New feature?	yes
BC breaks?	no
Deprecations?	no
Tests pass?	yes
Fixed tickets	#2321
Refs tickets	#2373
License	MIT
Doc PR	-
Changelog updated	yes

…g polyfill in the User Registration form.

shefik · 2015-03-29T03:34:36Z

This pull request furthers the polyfill solution that was introduced in the Zikula installer, so now the entire Zikula core can utilize it more easily/effectively via PageUtil.

Also, this pull request specially enables the polyfill in the User Registration form, which means that HTML5 form validation is enabled cross-browser. Right now, the code is properly handling the "required" attribute which is in the template. This means, we don't need new classes for error handling, such as "validation-error". We also don't need a "Check your entries" button, since the form validation will be handled natively via the browser's native HTML5 support.

I have more code to commit shortly, which will handle other validations from zikulausersmodule_ajax_getregistrationerrors.

…uff at #2373.

…AJAX on form submit.

shefik · 2015-03-29T09:10:45Z

I have completed the code for this pull request, incorporating code from the previous pull request submitted by jusuff. HTML5 form validation now takes precedence. Polyfills are enabled, in the event a browser does not support the validation natively. Also, AJAX validation occurs, to check if a user name and/or email address already exists.

The code appears to work correctly for me cross-browser when I tested it on Firefox and Safari. However, Chrome keeps displaying the registration form again at /register (saying that the user is already registered), instead of the expected "success" message. The issue has something to do with the behavior of "event.preventDefault()" and the function "off" on the "submit" handler, or perhaps the problem is due to the URI for the form and the "success" message being the same "/register". If anybody has any ideas about why only Chrome is misbehaving in this manner, please let me know.

Otherwise, you can test the code on Firefox and Safari to see it working.

ping @Guite @craigh @jusuff

craigh · 2015-03-29T11:33:44Z

src/lib/util/JCSSUtil.php

@@ -182,14 +189,14 @@ public static function prepareJavascripts($javascripts)
            $routeScript = $sm->get('router')->generate('fos_js_routing_js', array('callback' => 'fos.Router.setData'));
            array_unshift($javascripts, 'web/bundles/fosjsrouting/js/router.js', $routeScript);
        }
-        // first resolve any dependencies
+        // first resolve any dependencies                        


remove spaces

shefik · 2015-03-29T17:38:45Z

@craigh I completed the updates you indicated.

craigh · 2015-03-29T19:12:42Z

src/javascript/js-webshim/minified/polyfiller.init.js

+    $.webshims.setOptions('basePath', Zikula.Config.baseURL+'javascript/js-webshim/minified/shims/'); 
+    $.webshims.activeLang(Zikula.Config.lang);
+    $.webshims.polyfill(Zikula.Config.polyfillFeatures);
+})(jQuery);


this version doesn't appear to be 'minified' in anyway - do we really need to two copies of the same source? how about just one?

Yes, both files are needed. It's minified, because it loads the minified shims at "javascript/js-webshim/minified/shims/". The unminified shims are loaded at "javascript/js-webshim/dev/shims".

I see now. I assume you are loading the minified versions in prod? non-minified in dev?

It's using "System::isDevelopmentMode()", in the same manner in which other libraries are loaded, based on that condition.

craigh · 2015-03-29T19:15:48Z

@jusuff I would like you opinion on this before merging since it uses your code and adds to it.

shefik · 2015-03-29T19:20:53Z

@craigh The @ notion commit has been pushed.

craigh · 2015-03-29T19:26:28Z

@Guite - would also like your support before merging please.

shefik · 2015-03-29T19:33:12Z

Although this pull request specially addresses the User Registration form, it adds a new method to allow support for all of the available webshim features:

canvas
details
es5
filereader (implements FileReader, XHR2 (CORS/FormData), FormData, and an input[type="file"] picker)
forms (form validation and form features: fieldset[disabled], <input form="idref" />, placeholder...)
forms-ext (input wigets)
geolocation
matchMedia (includes matchMedia and matchMedia.addListener polyfill)
mediaelement
picture (responsive images: picture andsrcset)
promise
url (window.URL)
usermedia (navigator.getUserMedia)
sticky (position: sticky)
track (subtitles, catptions and textTrack API)
xhr2 (an alias for filereader)

The User Registration form just utilizes the polyfill for "forms". However, any of the above features can be loaded via the following examples:

{pageaddvar name='javascript' value='polyfill'}
Defaults to "forms".

{pageaddvar name='javascript' value='polyfill' features='canvas geolocation'}

PageUtil::addVar('polyfill_features', 'promise url');

Which gets added to the Zikula.Config in the head:

Zikula.Config.polyfillFeatures

craigh · 2015-03-29T20:53:40Z

@shefik - that feature requires a changelog update please.

craigh · 2015-03-29T21:03:59Z

@shefik I have this error in my javascript console (Safari)

Failed to load resource: the server responded with a status of 412 (Precondition Failed)
http://127.0.0.1/core.git/src/javascript/js-webshim/minified/shims/form-validation.js

craigh · 2015-03-29T21:05:00Z

oops - nevermind ;-)

craigh · 2015-03-29T21:06:22Z

well, I thought it was just a browser cache issue, but it continues to happen. now I get the same error but with a different link

http://127.0.0.1/core.git/src/javascript/js-webshim/minified/shims/combos/15.js

shefik · 2015-03-29T21:08:34Z

@craigh I am not experiencing that error at all in Safari.

craigh · 2015-03-29T21:12:30Z

@jusuff - do you have any ideas on the Chrome issue above? It seems to be a problem with the ajax validation.

craigh · 2015-03-29T21:15:01Z

@jusuff - @shefik says:

it really just using event.preventDefault(); and then later submit(). chrome is not liking it somehow

…rs. Focus on the first invalid field.

…ince using "submit" causes unexpected behavior in Chrome (even though other browsers such as Safari and Firefox properly handle the validation and submit.

shefik · 2015-03-30T04:09:52Z

@craigh @jusuff I fixed the issue I mentioned above, regarding Chrome. I changed the event handler to validate entries from "submit" to "blur" on the "User Name" and "Email Address" fields, since using "submit" causes unexpected behavior in Chrome (even though other browsers such as Safari and Firefox properly handle the validation and submit).

Actually, I think this change is more effective, because now other modules (such as Profile) can potentially add additional custom validations, by just attaching to the "blur" event on fields displayed from their third-party module.

shefik · 2015-03-30T04:29:54Z

@craigh CHANGELOG has been updated.

shefik · 2015-03-30T04:45:45Z

I'm done with the code now.

Adding additional support for polyfills in Zikula core

coveralls · 2016-11-14T11:11:21Z

Changes Unknown when pulling 0b9e6c4 on shefik:registration_form into * on zikula:1.4*.

Adding additional support for polyfills in Zikula core. Also, enablin…

3127f8f

…g polyfill in the User Registration form.

shefik mentioned this pull request Mar 29, 2015

Add ajax-based validation for registration form (refs #2321) #2373

Closed

shefik changed the title ~~Adding additional support for polyfills in Zikula core.~~ [WIP] Adding additional support for polyfills in Zikula core Mar 29, 2015

shefik added 7 commits March 29, 2015 00:03

Applying initial code changes, as submitted via a pull request by jus…

1558e0f

…uff at #2373.

Modifying code to use native validation via "minlength".

18fa889

Correcting error messages.

8451dfc

Correcting error messages.

a124f35

Setting syntax to use HTML5 form validation, with fallback to Zikula …

aa9f2d3

…AJAX on form submit.

Allowing form to be submitted, when there are no errors.

fe54f10

Modifying error message.

6018636

Guite added this to the 1.4.0 milestone Mar 29, 2015

Using "off", instead of "unbind".

5bd1ff9

shefik changed the title ~~[WIP] Adding additional support for polyfills in Zikula core~~ Adding additional support for polyfills in Zikula core Mar 29, 2015

shefik added 2 commits March 29, 2015 06:30

Using wrapper for "setCustomValidity", to add support in Safari.

36c2796

Adding support for "minLength" in Firefox.

cbbae78

craigh reviewed Mar 29, 2015
View reviewed changes

shefik added 4 commits March 29, 2015 13:19

Removing spaces.

da3e730

Removing spaces.

73fa648

Removing spaces.

f550e07

Using the @ notation.

66861a2

craigh reviewed Mar 29, 2015
View reviewed changes

shefik added 3 commits March 29, 2015 21:02

Setting custom validity messages for validation response via AJAX.

e7d8053

Simulate the form submission, so that the first invalid message appea…

4f50da3

…rs. Focus on the first invalid field.

Changing event handler to validate entries from "submit" to "blur", s…

3e0635c

…ince using "submit" causes unexpected behavior in Chrome (even though other browsers such as Safari and Firefox properly handle the validation and submit.

Updating CHANGLOG.

0b9e6c4

This was referenced Mar 30, 2015

Adding Support for Webshim and Polyfill zikula-modules/Profile#53

Closed

Adding Support for Webshim and Polyfill zikula-modules/Legal#50

Closed

Guite added a commit that referenced this pull request Mar 30, 2015

Merge pull request #2377 from shefik/registration_form

cff5d99

Adding additional support for polyfills in Zikula core

Guite merged commit cff5d99 into zikula:1.4 Mar 30, 2015

Guite mentioned this pull request Mar 30, 2015

Confirm registration validation is working properly #2321

Closed

Guite mentioned this pull request Apr 8, 2015

Add support for Webshim and Polyfill Guite/MostGenerator#673

Closed

shefik deleted the registration_form branch September 25, 2016 10:07

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adding additional support for polyfills in Zikula core #2377

Adding additional support for polyfills in Zikula core #2377

shefik commented Mar 29, 2015

shefik commented Mar 29, 2015

shefik commented Mar 29, 2015

craigh Mar 29, 2015

shefik Mar 29, 2015

shefik commented Mar 29, 2015

craigh Mar 29, 2015

shefik Mar 29, 2015

craigh Mar 29, 2015

shefik Mar 29, 2015

craigh commented Mar 29, 2015

shefik commented Mar 29, 2015

craigh commented Mar 29, 2015

shefik commented Mar 29, 2015

craigh commented Mar 29, 2015

craigh commented Mar 29, 2015

craigh commented Mar 29, 2015

craigh commented Mar 29, 2015

shefik commented Mar 29, 2015

craigh commented Mar 29, 2015

craigh commented Mar 29, 2015

shefik commented Mar 30, 2015

shefik commented Mar 30, 2015

shefik commented Mar 30, 2015

coveralls commented Nov 14, 2016

Adding additional support for polyfills in Zikula core #2377

Adding additional support for polyfills in Zikula core #2377

Conversation

shefik commented Mar 29, 2015

shefik commented Mar 29, 2015

shefik commented Mar 29, 2015

craigh Mar 29, 2015

Choose a reason for hiding this comment

shefik Mar 29, 2015

Choose a reason for hiding this comment

shefik commented Mar 29, 2015

craigh Mar 29, 2015

Choose a reason for hiding this comment

shefik Mar 29, 2015

Choose a reason for hiding this comment

craigh Mar 29, 2015

Choose a reason for hiding this comment

shefik Mar 29, 2015

Choose a reason for hiding this comment

craigh commented Mar 29, 2015

shefik commented Mar 29, 2015

craigh commented Mar 29, 2015

shefik commented Mar 29, 2015

craigh commented Mar 29, 2015

craigh commented Mar 29, 2015

craigh commented Mar 29, 2015

craigh commented Mar 29, 2015

shefik commented Mar 29, 2015

craigh commented Mar 29, 2015

craigh commented Mar 29, 2015

shefik commented Mar 30, 2015

shefik commented Mar 30, 2015

shefik commented Mar 30, 2015

coveralls commented Nov 14, 2016