form validation with Parsley

assets/css/src/admin.styl

@@ -5,7 +5,7 @@
 @require 'common'
 @require 'modal'
 @require 'notice'
-@require 'validation_engine'
+@require 'parsley'
 
 @require 'form_editor'
 @require 'listing'

assets/css/src/parsley.styl

@@ -0,0 +1,27 @@
+input.parsley-success,
+select.parsley-success,
+textarea.parsley-success
+  color #468847
+  background-color #DFF0D8
+  border 1px solid #D6E9C6
+
+input.parsley-error,
+select.parsley-error,
+textarea.parsley-error
+  color #B94A48
+  background-color #F2DEDE
+  border 1px solid #EED3D7
+
+.parsley-errors-list
+  margin 2px 0 3px
+  padding 0
+  list-style-type none
+  font-size 0.9em
+  line-height 0.9em
+  opacity 0
+  transition all .3s ease-in
+  -o-transition all .3s ease-in
+  -moz-transition all .3s ease-in
+  -webkit-transition all .3s ease-in
+  &.filled
+    opacity 1

assets/css/src/public.styl

@@ -0,0 +1,3 @@
+@import 'nib'
+
+@require 'parsley'

assets/css/src/validation_engine.styl

@@ -1,141 +0,0 @@
-lesscss-percentage(n)
-  (n * 100)%
-popupBg = rgb(0, 87, 154, 1)
-popupTextColor = rgb(255, 255, 255, 1)
-borderColor = rgb(255, 255, 255, 1)
-borderWidth = 1px
-popupFontSize = 12px
-popupRadius = 0
-popupShadowWidth = 2px
-popupShadowColor = rgb(51, 51, 51, 1)
-/* Z-INDEX */
-.formError
-  z-index 990
-.formError .formErrorContent
-  z-index 991
-.formError .formErrorArrow
-  z-index 996
-.ui-dialog .formError
-  z-index 5000
-.ui-dialog .formError .formErrorContent
-  z-index 5001
-.ui-dialog .formError .formErrorArrow
-  z-index 5006
-.inputContainer
-  position relative
-  float left
-.formError
-  position absolute
-  top 300px
-  left 300px
-  display block
-  cursor pointer
-  text-align left
-.formError.inline
-  position relative
-  top 0
-  left 0
-  display inline-block
-.ajaxSubmit
-  padding 20px
-  background #55ea55
-  border 1px solid #999
-  display none
-.formError .formErrorContent
-  width 100%
-  background popupBg
-  position relative
-  color popupTextColor
-  min-width 120px
-  font-size popupFontSize
-  border borderWidth solid borderColor
-  box-shadow 0 0 popupShadowWidth popupShadowColor
-  -moz-box-shadow 0 0 popupShadowWidth popupShadowColor
-  -webkit-box-shadow 0 0 popupShadowWidth popupShadowColor
-  -o-box-shadow 0 0 popupShadowWidth popupShadowColor
-  padding 4px 10px 4px 10px
-  border-radius popupRadius
-  -moz-border-radius popupRadius
-  -webkit-border-radius popupRadius
-  -o-border-radius popupRadius
-.formError.inline .formErrorContent
-  box-shadow none
-  -moz-box-shadow none
-  -webkit-box-shadow none
-  -o-box-shadow none
-  border none
-  border-radius 0
-  -moz-border-radius 0
-  -webkit-border-radius 0
-  -o-border-radius 0
-.greenPopup .formErrorContent
-  background #33be40
-.blackPopup .formErrorContent
-  background #393939
-  color #FFF
-.formError .formErrorArrow
-  width 15px
-  margin -2px 0 0 13px
-  position relative
-body[dir='rtl'] .formError .formErrorArrow, body.rtl .formError .formErrorArrow
-  margin -2px 13px 0 0
-.formError .formErrorArrowBottom
-  box-shadow none
-  -moz-box-shadow none
-  -webkit-box-shadow none
-  -o-box-shadow none
-  margin 0px 0 0 12px
-  top 2px
-.formError .formErrorArrow div
-  border-left borderWidth solid borderColor
-  border-right borderWidth solid borderColor
-  box-shadow 0 ceil((popupShadowWidth / 3)) ceil((popupShadowWidth / 2)) lighten(popupShadowColor, 10%)
-  -moz-box-shadow 0 ceil((popupShadowWidth / 3)) ceil((popupShadowWidth / 2)) lighten(popupShadowColor, 10%)
-  -webkit-box-shadow 0 ceil((popupShadowWidth / 3)) ceil((popupShadowWidth / 2)) lighten(popupShadowColor, 10%)
-  -o-box-shadow 0 ceil((popupShadowWidth / 3)) ceil((popupShadowWidth / 2)) lighten(popupShadowColor, 10%)
-  font-size 0px
-  height 1px
-  background popupBg
-  margin 0 auto
-  line-height 0
-  font-size 0
-  display block
-.formError .formErrorArrowBottom div
-  box-shadow none
-  -moz-box-shadow none
-  -webkit-box-shadow none
-  -o-box-shadow none
-.greenPopup .formErrorArrow div
-  background #33be40
-.blackPopup .formErrorArrow div
-  background #393939
-  color #FFF
-.formError .formErrorArrow .line10
-  width 13px
-  border none
-.formError .formErrorArrow .line9
-  width 11px
-  border none
-.formError .formErrorArrow .line8
-  width 11px
-.formError .formErrorArrow .line7
-  width 9px
-.formError .formErrorArrow .line6
-  width 7px
-.formError .formErrorArrow .line5
-  width 5px
-.formError .formErrorArrow .line4
-  width 3px
-.formError .formErrorArrow .line3
-  width ceil((borderWidth / 2))
-  border-left borderWidth solid borderColor
-  border-right borderWidth solid borderColor
-  border-bottom 0 solid borderColor
-.formError .formErrorArrow .line2
-  width 3px
-  border none
-  background borderColor
-.formError .formErrorArrow .line1
-  width 1px
-  border none
-  background borderColor