jasonyeo avatar jasonyeo committed 8320538 Draft

can now validate form fields and cart bug fixed

Comments (0)

Files changed (9)

static/js/views/cart.js

         render: function() {
             var thisCart = this;
             console.log('rendering');
+            this.renderCartPopover();
             $('.popover-content #cart-items').html('');
+            $('#cart-popover-content #cart-items').html('');
             app.Cart.each(function(product) {
                 $('.popover-content #cart-items').append( thisCart.template( product.toJSON() ) );
+                $('#cart-popover-content #cart-items').append( thisCart.template( product.toJSON() ) );
             });
-            this.renderCartPopover();
             return this;
         },
 

static/js/views/checkout.js

             return this;
         },
 
+        validForm: function( formId ) {
+            var isValid = true;
+            var errorStr = '<span class="help-inline">Required</span>';
+            $(formId + ' input').each(function(indx,elem) {
+                var $input = $(elem);
+                if ( $input.val() === '' ) {
+                    $input.parent().append( errorStr );
+                    $input.parent().parent().addClass('error');
+                    isValid = false;
+                } else {
+                    $input.parent().parent().removeClass('error');
+                    $(formId + '.help-inline').empty();
+                }
+            });
+            return isValid;
+        },
+
+        validEmail: function( email ) {
+            var emailPattern = /^(?!\.)[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
+            return emailPattern.test( email );
+        },
+
         submitPayment: function() {
             var checkoutView = this;
             console.log('submitting payment info');
 
-            var creditCardInfo = {
-                "Order_ID": 123,
-                "cardno": $('#inputCC').val(),
-                "code": $('#inputCW2').val(),
-                "expiryDate": $('#inputExpiryDate').val()
-            };
+            if ( this.validForm('#payment-form') ) {
+                var creditCardInfo = {
+                    "Order_ID": 123,
+                    "cardno": $('#inputCC').val(),
+                    "code": $('#inputCW2').val(),
+                    "expiryDate": $('#inputExpiryDate').val()
+                };
 
-            $.ajax({
-                type: "POST",
-                url: "/creditcards",
-                data: JSON.stringify(creditCardInfo),
-                contentType: "application/json; charset=utf-8",
-                statusCode: {
-                    202: function () {
-                        console.log("202 (Accepted)");
+                $.ajax({
+                    type: "POST",
+                    url: "/creditcards",
+                    data: JSON.stringify(creditCardInfo),
+                    contentType: "application/json; charset=utf-8",
+                    statusCode: {
+                        202: function () {
+                            console.log("202 (Accepted)");
+                        },
+                        406: function () {
+                            console.log("406 (Not Acceptable)");
+                        },
                     },
-                    406: function () {
-                        console.log("406 (Not Acceptable)");
+                    success: function (data) {
+                        var str = 'Receipt No: ' + data;
+                        app.receipt = data;
+                        app.creditCardInfo = creditCardInfo;
+                        console.log(str);
+                        checkoutView.showStep2();
                     },
-                },
-                success: function (data) {
-                    var str = 'Receipt No: ' + data;
-                    app.receipt = data;
-                    app.creditCardInfo = creditCardInfo;
-                    console.log(str);
-                    checkoutView.showStep2();
-                },
-                dataType: "text",
-                error: function (jqXHR, textStatus, errorThrown) {
-                    $('#result').text("The following error occured: " + textStatus, errorThrown);
-                }
-            }); 
+                    dataType: "text",
+                    error: function (jqXHR, textStatus, errorThrown) {
+                        $('#result').text("The following error occured: " + textStatus, errorThrown);
+                    }
+                }); 
+            }
         },
 
         submitDetails: function() {
-            var checkoutView = this;
-            var userInfo = {
-                "Name": $('#inputName').val(),
-                "Address": $('#inputAdd').val(),
-                "Tel": $('#inputContact').val(),
-                "Email": $('#inputEmail').val()
-            };
-            app.userInfo = userInfo;
-            app.userInfo.cardno = app.creditCardInfo.cardno;
-            var orderInfo = {
-                Branch_ID: 1,
-                Employee_ID: 1,
-                Product_ID: app.Cart.getProductIds(),
-                Quantity: app.Cart.getQuantities()
-            };
-            app.orderInfo = orderInfo;
-             $.ajax({
-                 type: "PUT",
-                 url: "/orders",
-                 data: JSON.stringify(orderInfo),
-                 contentType: "application/json; charset=utf-8",
-                 success: function (data) {
-                    var str = 'Order_ID: ' + data;
-                    app.orderId = data;
-                    console.log(str);
-                    checkoutView.sendMail();
-                    checkoutView.showStep3();
-                 },
-                 dataType: "text",
-                 error: function (jqXHR, textStatus, errorThrown) {
-                     $('#result').text("The following error occured: " + textStatus, errorThrown);
-                 }
-             }); 
+            if ( this.validForm('#cust-detail-form') ){
+                var checkoutView = this;
+                var userInfo = {
+                    "Name": $('#inputName').val(),
+                    "Address": $('#inputAdd').val(),
+                    "Tel": $('#inputContact').val(),
+                    "Email": $('#inputEmail').val()
+                };
+                
+                if ( this.validEmail( userInfo.Email ) ) {
+                    app.userInfo = userInfo;
+                    app.userInfo.cardno = app.creditCardInfo.cardno;
+
+                    var orderInfo = {
+                        Branch_ID: 1,
+                        Employee_ID: 1,
+                        Product_ID: app.Cart.getProductIds(),
+                        Quantity: app.Cart.getQuantities()
+                    };
+                    app.orderInfo = orderInfo;
+
+                     $.ajax({
+                         type: "PUT",
+                         url: "/orders",
+                         data: JSON.stringify(orderInfo),
+                         contentType: "application/json; charset=utf-8",
+                         success: function (data) {
+                            var str = 'Order_ID: ' + data;
+                            app.orderId = data;
+                            console.log(str);
+                            checkoutView.sendMail();
+                            checkoutView.showStep3();
+                         },
+                         dataType: "text",
+                         error: function (jqXHR, textStatus, errorThrown) {
+                             $('#result').text("The following error occured: " + textStatus, errorThrown);
+                         }
+                     }); 
+                } else {
+                    var $input = $('#inputEmail');
+                    var errorStr = '<span class="help-inline">Invalid Email</span>';
+                    $input.parent().append( errorStr );
+                    $input.parent().parent().addClass('error');
+                }
+            }
         },
 
         sendMail: function() {

templates/branchInfo.html

         <meta name="apple-mobile-web-app-capable" content="yes" />
         <title id="systemName">Mobile POS</title>
         <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet">
+        <meta name="apple-mobile-web-app-capable" content="yes" />
     </head>
     <body>
         <div class="navbar-inner ">

templates/checkOut.html

         <div id="form-container">
             <!--Payment detail form -->
             <div class="row well" style="margin-left: 10px"> 
-                <form class="form-horizontal2 ">
+                <form class="form-horizontal2 " id="payment-form">
                     <legend> Payment detail </legend>
                     <div class="control-group">
                         <label class="control-label" for="inputCC">Credit Card No. </label>
                         <div class="controls">
-                            <input type="text" id="inputCC" placeholder="Credit Card Number">
+                            <input type="text" id="inputCC" required placeholder="Credit Card Number">
                         </div>
                     </div>
                     <div class="control-group">
                         <label class="control-label" for="inputCW2">CW2/CV2</label>
                         <div class="controls">
-                            <input type="text" id="inputCW2" placeholder="CW2/CV2">
+                            <input type="text" id="inputCW2" required placeholder="CW2/CV2">
                         </div>
                     </div>
                     <div class="control-group">
                         <label class="control-label" for="inputExpiryDate">Expiry Date</label>
                         <div class="controls">
-                            <input type="text" id="inputExpiryDate" placeholder="Credit Card Expiry Date (MMYY)">
+                            <input type="text" id="inputExpiryDate" required placeholder="Credit Card Expiry Date (MMYY)">
                         </div>
                     </div>
                 </form>

templates/checkOutStep2.html

 
         <!--Delivery detail form -->
         <div class="row well" id="delivery-form" style="margin-left: 10px"> 
-            <form class="form-horizontal2 ">
+            <form class="form-horizontal2 " id="cust-detail-form">
                 <legend> Customer detail </legend>
                 <div class="control-group">
                     <label class="control-label" for="inputName">Name </label>
             </form>
         </div>
     </div>
-
 </div>

templates/index.html

         <meta name="apple-mobile-web-app-capable" content="yes" />
         <title id="systemName">Aeki Store - Your Preferred Furniture Store</title>
         <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet">
+        <meta name="apple-mobile-web-app-capable" content="yes" />
     </head>
 
     <body>

templates/pastOrder.html

         <meta name="apple-mobile-web-app-capable" content="yes" />
         <title id="systemName">Mobile POS</title>
         <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet">
+        <meta name="apple-mobile-web-app-capable" content="yes" />
     </head>
     <body>
         <div class="navbar-inner ">

templates/promotion.html

         <meta name="apple-mobile-web-app-capable" content="yes" />
         <title id="systemName">Mobile POS</title>
         <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet">    
+        <meta name="apple-mobile-web-app-capable" content="yes" />
     </head>
     <body>
         <div class="navbar-inner ">

templates/purchase.html

                 </div>
                 <div class="row">
                     <div class="col offset1">
-                        <a class="btn btn-small btn-info" href="#checkout" style="display: inline-block">
+                        <a class="btn btn-small btn-info" id="checkout-btn" href="#checkout" style="display: inline-block">
                             Checkout <i class="icon-arrow-right"></i>
                         </a>
                     </div>
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.