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

Reply via email to