> 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.
>
> 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...
>
>> 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
