add client side validation to password reset form.

1 files changed, 31 insertions, 0 deletions

diff --git a/app/assets/javascripts/views/passwords/reset_form.js.coffee b/app/assets/javascripts/views/passwords/reset_form.js.coffee
new file mode 100644
index 00000000..8d08e017
--- /dev/null
+++ b/app/assets/javascripts/views/passwords/reset_form.js.coffee
@@ -0,0 +1,31 @@
+class csx.Views.PasswordResetForm extends csx.AutoView
+  @viewName 'password-reset-form'
+  modelKey: "user"
+  events:
+    'input #user_email': 'onInput'
+    'submit form': 'onSubmit'
+
+  initialize: () ->
+    @model = new csx.Models.PasswordReset()
+
+  render: ->
+    @renderErrors(@model.validationError)
+
+  onInput: (event) ->
+    $element = $(event.target)
+    @model.set(@fieldNameFor($element), @valueFor($element))
+    @$('input[type=submit]').prop('disabled', !@model.isValid())
+    @render()
+
+  onSubmit: (event) ->
+    if !@model.isValid()
+      @$('input[type=submit]').prop('disabled', true)
+      event.preventDefault()
+      event.stopPropagation()
+    @render()
+
+  valueFor: (element) ->
+    if element.is(':checkbox')
+      element.prop('checked')
+    else
+      element.val()