Download & Extend

Add new HTML5 FAPI element: url

Project:Drupal core
Version:8.x-dev
Component:forms system
Category:feature request
Priority:normal
Assigned:Dave Reid
Status:needs review
Issue tags:html5, sprint

Issue Summary

Split from #675348: META: Support HTML5 form input elements to add a new 'urlfield' Form API element.

Questions:
1. Do we add validation?
2. Should local/internal path textfields be converted to an urlfield (e.g. URL alias field on nodes)?

Comments

#1

Assigned to:Anonymous» Dave Reid

#2

We probably should add validation, same validation thats done in the browser.

We shouldn't use this for local/internal path textfields mainly because the url field is supposed to be an absolute URL so if we use it for local/internal path the field will be :invalid.

#3

Yeah I double checked and the url element can only be used for absolute URLs, so that's a pretty easy decision as to how we validate it then: valid_url($url, TRUE).

#4

Status:active» needs review
AttachmentSizeStatusTest resultOperations
1174628-html5-url-element.patch10.98 KBIdleFAILED: [[SimpleTest]]: [MySQL] 29,892 pass(es), 1 fail(s), and 0 exception(es).View details | Re-test

#5

Status:needs review» needs work

The last submitted patch, 1174628-html5-url-element.patch, failed testing.

#6

Status:needs work» needs review
AttachmentSizeStatusTest resultOperations
1174628-html5-url-element.patch10.98 KBIdleFAILED: [[SimpleTest]]: [MySQL] 29,915 pass(es), 1 fail(s), and 0 exception(es).View details | Re-test

#7

Incorrectly named validation function.

AttachmentSizeStatusTest resultOperations
1174630-html5-url-element.patch12.15 KBIdleFAILED: [[SimpleTest]]: [MySQL] 29,906 pass(es), 1 fail(s), and 0 exception(es).View details | Re-test

#8

Status:needs review» needs work

The last submitted patch, 1174630-html5-url-element.patch, failed testing.

#9

Status:needs work» needs review
AttachmentSizeStatusTest resultOperations
1174630-html5-url-element.patch12.15 KBIdleFAILED: [[SimpleTest]]: [MySQL] 29,919 pass(es), 1 fail(s), and 0 exception(es).View details | Re-test

#10

Status:needs review» needs work

The last submitted patch, 1174630-html5-url-element.patch, failed testing.

#11

Status:needs work» needs review
AttachmentSizeStatusTest resultOperations
1174630-html5-url-element.patch12.15 KBIdleFAILED: [[SimpleTest]]: [MySQL] 29,925 pass(es), 1 fail(s), and 0 exception(es).View details | Re-test

#12

Dropbox did not sync in time...

AttachmentSizeStatusTest resultOperations
1174630-html5-url-element.patch12.2 KBIdlePASSED: [[SimpleTest]]: [MySQL] 29,906 pass(es).View details | Re-test

#13

Does the maxlength of 128 even need to be defined? If so, it should probably be longer than that, as some URLs are quite long.

#14

I'd be fine going with a default of 255 since that makes sense, but this was the default of the existing element textfield which was used for URLs.

#15

AttachmentSizeStatusTest resultOperations
1174630-html5-url-element.patch12.58 KBIdlePASSED: [[SimpleTest]]: [MySQL] 29,888 pass(es).View details | Re-test

#16

Status:needs review» needs work

@Dave, do we want to add the autocomplete to the url elements? I think it might be better to just leave the autocomplete stuff to the regular text fields.

We can always add them later.

#17

I don't see why not since this is essentially a text field anyway, it should probably support autocompletion.

#18

Status:needs work» needs review

#19

Autocomplete on a URL field can cause a problem with iOs devices ... if autocomplete is on, it'll treat it as a semantic text field and offer suggestions from the dictionary - basically, they equate "autocomplete" with "autocorrect". The problem is that not only will it try to autocorrect domains to similar dictionary words, but if you cancel them out you'll get domains (or domain fragments) in your autocorrect dictionary.

I realise this is technically a problem for iOs rather than Drupal/HTML5, but I'd prefer to see autocomplete disabled on URL fields by default.

#20

#21

#22

Cleaning up tags.

#23

@kingandy

Can you please provide documentation on the iOS autocomplete issue on URLs? My suspicion is that this problem is when the @autocomplete attribute is set to "on", or rather not set to "off". This likely has nothing to do with our autocomplete implementation in autocomplete.js.

That is, we can set @autocomplete="off" on the field, and still allow lookup values from the server w/ autocomplete.js.

#24

I think you're right, yes. Since this was an HTML 5 thread, and I'd just come from doing some @autocomplete integration myself, I assumed that's what was under discussion and completely forgot the word was also used for Drupal's javascript/callback-based mechanism...

So, yes, switching off the user-agent based autocomplete and injecting our own suggestions via the established javascript should be completely fine :)

#25

Rerolled for core/ and the death of profile.module.

AttachmentSizeStatusTest resultOperations
url_element-1174630-25.patch9.88 KBIdlePASSED: [[SimpleTest]]: [MySQL] 33,840 pass(es).View details | Re-test

#26

This issue has actually been block by #1174634: Add new HTML5 FAPI element: telephone

We probably should tackle that one pretty soon, and wrap up all these form elements.

#27

Here's another rerolled this time with a couple of extra test.

This is probably going to need to be rerolled yet one more time after #1174634: Add new HTML5 FAPI element: telephone gets in but lets see if this passes with the extra test.

AttachmentSizeStatusTest resultOperations
1174630-27.patch11.76 KBIdleFAILED: [[SimpleTest]]: [MySQL] 34,596 pass(es), 41 fail(s), and 58 exception(es).View details | Re-test

#28

Make sure to check this CSS too :)

#29

Yea, lol I wanted to make sure I got the test done right 1st, because I'm pretty sure i screw something up. Adding the css now.

#30

Side note that I think we may also need to add a selector for this in core/misc/vertical-tabs.css for .vertical-tabs .form-type-url input.

#31

Status:needs review» needs work

The last submitted patch, 1174630-27.patch, failed testing.

#32

Status:needs work» needs review
  • Rebased onto 8.x and fixed merge conflicts.
  • Fixed CSS. Not taking into account #30, yet.
  • Fixed test failures.
AttachmentSizeStatusTest resultOperations
1174630-html5-url-32.patch13.03 KBIdlePASSED: [[SimpleTest]]: [MySQL] 34,483 pass(es).View details | Re-test
1174630-interdiff-32.txt3.74 KBIgnoredNoneNone

#33

Status:needs review» reviewed & tested by the community

So I tested this and the browser actually lets you submit with extra space on the url field so the trim makes sense here.

So this looks good to me. Marking it RTBC.

#34

Status:reviewed & tested by the community» needs work

We're missing tests to confirm the trimming behavior like are present on the e-mail patch.

+++ b/core/modules/simpletest/tests/form_test.moduleundefined
@@ -1205,6 +1205,14 @@ function _form_test_disabled_elements($form, &$form_state) {
     );
   }

+  // URL.
+  $form['disabled_container']['disabled_container_url']= array(
+    '#type' => 'url',
+    '#title' => 'url',
+    '#default_value' => 'http://example.com',
+    '#test_hijack_value' => 'http://example.com/foo',
+  );
+
   // Text format.
   $form['text_format'] = array(
     '#type' => 'text_format',

What is this addition? I couldn't find anything similar in the 'tel' FAPI patch that went in?

#35

Status:needs work» needs review

Yea, that extra content doesn't belong there.

This should be in the loop instead. It also looks like we missed a test in the tel element.

AttachmentSizeStatusTest resultOperations
1174630-html5-url-35.patch13.47 KBIdleFAILED: [[SimpleTest]]: [MySQL] 34,559 pass(es), 41 fail(s), and 58 exception(s).View details | Re-test

#36

Status:needs review» needs work

Actually it's still missing the trim test.

#37

I was wrong - that hunk of code is needed since we can't use element value or hijack values of non-URL values otherwise the form submit fails validation. Sorry ericduran. :(

#38

Issue tags:+sprint

Adding to current sprint. So in summary, we still need tests to confirm validation and trimming of this field.

#39

Issue tags:+Needs tests

I was wrong - that hunk of code is needed since we can't use element value or hijack values of non-URL values otherwise the form submit fails validation. Sorry ericduran. :(

Yep, exactly. So ingnore #35 or were there any other changes?

#40

We're still missing a test to confirm that the form submits a trimmed URL field value.

#41

Of course. Thus "+Needs tests". I was talking about the patch in #35.

#42

Status:needs work» needs review
Issue tags:-Needs tests

Ok. Here are some tests.

AttachmentSizeStatusTest resultOperations
1174630-html5-url-42.patch15.61 KBIdlePASSED: [[SimpleTest]]: [MySQL] 34,634 pass(es).View details | Re-test
1174630-interdiff-42.txt3.03 KBIgnoredNoneNone