AEM dialog validation

过程

其实无非就是从dialog中获取数据，拿到js判断再给dialog一个回馈。
我卡着的地方就是，到底如何将js绑定到某个dialog下？
目测，现在有两种写法：

首先解释一下

一开始最令我困惑的地方就是clientlibs下的categories，一开始我只知道这个html关联js/css的。
但是categories为cq.authoring.dialog意味着，一旦有一个dialog打开就会引用你这结点下的js/css
而且这个categories可以自定义，就是让你的js绑定在某个节点以下。

第一种

转载自：Adding JS via cq authoring dialog in AEM
从这个视频往后三集都是讲这一方面的
77集的git网址

---

在某个组件下，创建了一个validation专门放置校验dialog的js
如图为validation的节点属性，categories是自定义的

然后再在组件下某个位置创建一个include-clientlib节点，注意js和sling属性

只要这样做就能将他们绑定在一起了，当然如果你想要全局的直接在validation节点下用cq.authoring.dialog即可

---

看看js代码：

$(window).adaptTo("foundation-registry").register("foundation.validation.validator", {
  selector: "[data-should-contain]",
  validate: function(el) {
    var shouldContain = el.getAttribute("data-should-contain");  //aem

    console.log('validating text contains aem');
    console.log('input should contain ' + shouldContain);

    var input = el.value;  //input added by author

    if (input.indexOf(shouldContain) === -1 ) {
      return "The field should contain " + shouldContain + ". It's current value is " + el.value + ".";
    }
  }
});

注意：如果你不将categories设置好的话，js就会报错，说什么什么undefined...
此时看代码，可以看到有一个选择器，selector，这个选择器就意味着你如何从dialog中获取到值，你得选中他。
这也是第一种方法和第二种方法差异比较大的地方。

选择器

组件继续往下走，选择你要验证的某个文本框，在下面添加一个granite:data节点，就代表着选择器了

如图，我这儿不太一样，视频中的属性名为should-contain，和代码中对应着的，然后值他设置为了aem(像我属性名字为pattern，在代码中selector就得为[data-pattern])
就是用el.getAttribute拿到了节点下属性的值
然后el.value可以拿到输入框中的值
再对两者进行校验。如果有问题就return个结果。

第二种方法

转载自：AEM Touch UI Custom Validation
git网址：nateyolles/aem-touch-ui-validation
下载他的例子试试就知道了

---

选择器

其中我觉得最大的区别就是选择器。因为他并没有在节点下创建一个granite:data节点，而是直接通过html的类选择器来找到对应的框
(我就有点疑惑，这个html到底写在哪儿)
我找html选择器的时候就是先在页面打开dialog然后F12进行查看

顿悟

我明白了，其实selector大家都是可以采用两种方式的。
第二种方法其实就是将第一种方法的js变为jQuery！！！
就是说第一种是js，第二种是jQuery，其他没有差别了。

更深一步理解

为什么选择器可以直接使用[data:xxx]呢？[data:xxx]到底是什么意思？是属性为data:xxx的意思。
所以在某个节点下加了granite:data节点的，都会在对应的html文件中增加一个属性以data:开头，节点中属性为结尾的一个html中的属性，value就是节点中的值
所以可以直接用这种选择器来进行选择，并且el.getAttribute就是获取html上属性的值把？
所以当你有不同的地方要判断js，节点下的属性值千万不要一样。我就是两个地方都用pattern，导致他们会串起来。
而cq.include只是添加js并且判断你在某个节点打开dialog时触发js罢了。并不是该js只会找include节点以下的内容。js还是会根据选择器去找的。

结束语

我整这个整半天，一开始就是不明白cq.authoring.dialog，而且一旦我用自己平常的js里写git例子中的代码，就会说这个找不到那个找不到。。。实在难受
然后第二种方法我之前试了还是有点问题，可以进来了，但是好像并不会进行校验。是我的问题。我还是用了第一种