From 1fa2ab7ded864fa1f5f70bbb20d5435f6fd8607e Mon Sep 17 00:00:00 2001
From: Nikolai R Kristiansen <nikolaik@gmail.com>
Date: Tue, 14 Jul 2015 16:57:05 +0200
Subject: [PATCH] Less weird form validation

---
 apps/kassa/templates/kassa/register.html |  2 +-
 static/app/scripts/app.js                | 24 +++++++++++++-----------
 static/app/templates/search_result.html  |  2 +-
 static/dist/scripts/app.js               | 24 +++++++++++++-----------
 static/dist/scripts/templates.js         |  2 +-
 5 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/apps/kassa/templates/kassa/register.html b/apps/kassa/templates/kassa/register.html
index 66d6b6b..6ef6adb 100644
--- a/apps/kassa/templates/kassa/register.html
+++ b/apps/kassa/templates/kassa/register.html
@@ -15,7 +15,7 @@
                 <!-- Placeholder -->
                 <div class="list-group-item search-result placeholder">
                     <input type="radio" name="user" checked>
-                    <em>New user</em>
+                    <em>New member</em>
                     <div class="labels">
                         <span class="label label-card "><span class="glyphicon glyphicon-user"></span> New card</span>
                     </div>
diff --git a/static/app/scripts/app.js b/static/app/scripts/app.js
index 589201b..72a9755 100644
--- a/static/app/scripts/app.js
+++ b/static/app/scripts/app.js
@@ -123,18 +123,18 @@ function validateCardForm() {
        - phonenumber should be valid (python-phonenumbers)
        - userid exists (optional)
     */
-    /* Card number */
-    var cardno_invalid = validateCardNumber(formData.card_number);
-    if(cardno_invalid) {
-        set_field_state(_dom.cardNumberField, 'error', cardno_invalid);
-        errors.push(cardno_invalid);
-    }
     /* Phone number */
     var phone_number_invalid = validatePhoneNumber(formData.phone_number);
     if(phone_number_invalid) {
         set_field_state(_dom.phoneNumberField, 'error', phone_number_invalid);
         errors.push(phone_number_invalid);
     }
+    /* Card number */
+    var cardno_invalid = validateCardNumber(formData.card_number);
+    if(cardno_invalid) {
+        set_field_state(_dom.cardNumberField, 'error', cardno_invalid);
+        errors.push(cardno_invalid);
+    }
     console.log("Errors: ", errors);
 
     if(errors.length === 0) {
@@ -199,10 +199,11 @@ $(document).ready(function(){
 
     /* Phone number as you type */
     _dom.phoneNumberField.on('input', function() {
-        if( !validateCardForm() ) {
+        var val = _dom.phoneNumberField.val().trim();
+        if( validatePhoneNumber(val) !== '') {
+            set_field_state(_dom.phoneNumberField, 'error', validatePhoneNumber(val));
             return;
         }
-        var val = _dom.phoneNumberField.val().trim();
         $.getJSON(urls.insidePhoneNumberApi, {q: val}, function(data) {
             if(data.meta && data.meta.num_results == 1) {
                 set_field_state(_dom.phoneNumberField, 'success');
@@ -217,10 +218,11 @@ $(document).ready(function(){
     /* Card number as you type */
     _dom.cardNumberField.on('input', function() {
         /* Card number should exist in the database and not tied to existing user */
-        if( !validateCardForm() ) {
+        var val = _dom.cardNumberField.val().trim();
+        if( validateCardNumber(val) !== '' ) {
+            set_field_state(_dom.cardNumberField, 'error', validateCardNumber(val));
             return;
         }
-        var val = _dom.cardNumberField.val().trim();
         $.getJSON(urls.insideCardNumber, {card_number: val}, function(data) {
             if(data.error) {
                 set_field_state(_dom.cardNumberField, 'error', data.error);
@@ -257,7 +259,7 @@ $(document).ready(function(){
         if(number === '-') {
             number = '';
         }
-        _dom.phoneNumberField.val(number);
+        _dom.phoneNumberField.val(number).trigger('input');
     });
 
     _dom.registerButton.on('click', function(e) {
diff --git a/static/app/templates/search_result.html b/static/app/templates/search_result.html
index 9a816f2..28abbff 100644
--- a/static/app/templates/search_result.html
+++ b/static/app/templates/search_result.html
@@ -38,7 +38,7 @@
     <!-- Placeholder -->
     <div class="list-group-item search-result placeholder">
         <input type="radio" name="user" checked>
-        <em>New</em>
+        <em>New member</em>
         <div class="labels">
             <span class="label label-card "><span class="glyphicon glyphicon-user"></span> {{ res.cardno|default('New card') }}</span>
         </div>
diff --git a/static/dist/scripts/app.js b/static/dist/scripts/app.js
index 589201b..72a9755 100644
--- a/static/dist/scripts/app.js
+++ b/static/dist/scripts/app.js
@@ -123,18 +123,18 @@ function validateCardForm() {
        - phonenumber should be valid (python-phonenumbers)
        - userid exists (optional)
     */
-    /* Card number */
-    var cardno_invalid = validateCardNumber(formData.card_number);
-    if(cardno_invalid) {
-        set_field_state(_dom.cardNumberField, 'error', cardno_invalid);
-        errors.push(cardno_invalid);
-    }
     /* Phone number */
     var phone_number_invalid = validatePhoneNumber(formData.phone_number);
     if(phone_number_invalid) {
         set_field_state(_dom.phoneNumberField, 'error', phone_number_invalid);
         errors.push(phone_number_invalid);
     }
+    /* Card number */
+    var cardno_invalid = validateCardNumber(formData.card_number);
+    if(cardno_invalid) {
+        set_field_state(_dom.cardNumberField, 'error', cardno_invalid);
+        errors.push(cardno_invalid);
+    }
     console.log("Errors: ", errors);
 
     if(errors.length === 0) {
@@ -199,10 +199,11 @@ $(document).ready(function(){
 
     /* Phone number as you type */
     _dom.phoneNumberField.on('input', function() {
-        if( !validateCardForm() ) {
+        var val = _dom.phoneNumberField.val().trim();
+        if( validatePhoneNumber(val) !== '') {
+            set_field_state(_dom.phoneNumberField, 'error', validatePhoneNumber(val));
             return;
         }
-        var val = _dom.phoneNumberField.val().trim();
         $.getJSON(urls.insidePhoneNumberApi, {q: val}, function(data) {
             if(data.meta && data.meta.num_results == 1) {
                 set_field_state(_dom.phoneNumberField, 'success');
@@ -217,10 +218,11 @@ $(document).ready(function(){
     /* Card number as you type */
     _dom.cardNumberField.on('input', function() {
         /* Card number should exist in the database and not tied to existing user */
-        if( !validateCardForm() ) {
+        var val = _dom.cardNumberField.val().trim();
+        if( validateCardNumber(val) !== '' ) {
+            set_field_state(_dom.cardNumberField, 'error', validateCardNumber(val));
             return;
         }
-        var val = _dom.cardNumberField.val().trim();
         $.getJSON(urls.insideCardNumber, {card_number: val}, function(data) {
             if(data.error) {
                 set_field_state(_dom.cardNumberField, 'error', data.error);
@@ -257,7 +259,7 @@ $(document).ready(function(){
         if(number === '-') {
             number = '';
         }
-        _dom.phoneNumberField.val(number);
+        _dom.phoneNumberField.val(number).trigger('input');
     });
 
     _dom.registerButton.on('click', function(e) {
diff --git a/static/dist/scripts/templates.js b/static/dist/scripts/templates.js
index 4081e92..5e2e840 100644
--- a/static/dist/scripts/templates.js
+++ b/static/dist/scripts/templates.js
@@ -97,7 +97,7 @@ output += "\n";
 ;
 }
 else {
-output += "\n    <!-- Placeholder -->\n    <div class=\"list-group-item search-result placeholder\">\n        <input type=\"radio\" name=\"user\" checked>\n        <em>New</em>\n        <div class=\"labels\">\n            <span class=\"label label-card \"><span class=\"glyphicon glyphicon-user\"></span> ";
+output += "\n    <!-- Placeholder -->\n    <div class=\"list-group-item search-result placeholder\">\n        <input type=\"radio\" name=\"user\" checked>\n        <em>New member</em>\n        <div class=\"labels\">\n            <span class=\"label label-card \"><span class=\"glyphicon glyphicon-user\"></span> ";
 output += runtime.suppressValue(env.getFilter("default").call(context, runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "res")),"cardno", env.opts.autoescape),"New card"), env.opts.autoescape);
 output += "</span>\n        </div>\n    </div>\n";
 ;