About to call it a night, but two pointers for you to explore. On Thu, Nov 16, 2017 at 10:54 PM, Craig Russell <apache....@gmail.com> wrote: > >> On Nov 16, 2017, at 7:45 PM, Sam Ruby <ru...@intertwingly.net> wrote: >> >> On Thu, Nov 16, 2017 at 6:27 PM, Craig Russell <apache....@gmail.com> wrote: >>> There are two validity checks: one is on the front end, and the other is on >>> the server. >> >> As a general rule, it is best practice to do the validity checks in both >> places. >> >> Checks in the front end can result in a more user friendly and >> immediate response. The downsides are that the data might be slightly >> stale and that malicious users can write their own client. >> >>> The front end code: >>> >>> def setVoteLink(event) >>> @votelink = event.target.value >>> self.checkValidity() >>> end >>> >>> I cannot find the self.checkValidity code. >> >> It is around line 222 of www/project/icla/views/pages/invite.js.rb. > > # client side field validations > def checkValidity() > @disabled = !%w(iclaname iclaemail pmc).all? do |id| > document.getElementById(id).checkValidity() > end > end > > I guess self.checkValidity calls the above code, which then calls > XXX.checkValidity for each element. Where is that code? I assumed it was some > Vue code which is hidden.
It is HTML5 DOM method. https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/checkValidity >> Note that while the syntax is Ruby, the semantics are JavaScript. >> That being said, ruby2js handles Vue better than React.js as I learned >> a bunch, and you can safely remove the 'self.' in the call and it will >> know to add back in a "this.". >> >>> What I think we should do is to put these validity checks into the front >>> end: >>> >>> # verify that the link refers to lists.apache.org message on the project >>> list >>> if not @votelink=~ /.*lists\.apache\.org.*/ >>> _error "Please link to a message via lists.apache.org" >>> end >>> if not @votelink=~ /.*#{pmc.mail_list}(\.incubator)?\.apache\.org.*/ >>> _error "Please link to the [RESULT][VOTE] message sent to the private >>> list." >>> end >>> >>> With the validity checks on the front end I can highlight the invalid form >>> field in red instead of having an error message in another part of the form. >>> >>> But where can I put this code? I think it's a Vue thing that needs to be >>> modified. >> >> The code above looks like it belongs within the render method in >> www/project/icla/views/pages/invite.js.rb; but it would need to be >> modified a bit as there is no HTML element named error. Perhaps you >> want something like _p.error, and you can define CSS styling for the >> error class in www/project/icla/public/css/icla.css. > > I don't want the error class at all. I want the link/notice input box to turn > red and a brief message to appear below it. Something like this: > https://github.com/hootlex/vuejs-form-validation-example > > I can sorta understand that code but don't know how to apply it to ruby2js > vue code... Another HTML5 DOM method: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/setCustomValidity >>> Craig L Russell >>> Secretary, Apache Software Foundation >>> c...@apache.org http://db.apache.org/jdo >> >> - Sam Ruby > > Craig L Russell > Secretary, Apache Software Foundation > c...@apache.org http://db.apache.org/jdo - Sam Ruby
