Validating phone number and add a mask

ialbuqu · Oct 24, 2013 · 2c9eb95 · 2c9eb95
1 parent 45d1cdb
commit 2c9eb95
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 2 deletions.
diff --git a/public/js/billbo.js b/public/js/billbo.js
@@ -1,4 +1,8 @@
 $(function() {
+
+// Phone number
+  $("input[type=tel]").mask("+99 (99) 9999-9999");
+
 // Search
   $('#search_field').keyup(function() {
     var val = $(this).val().toLowerCase();

diff --git a/public/js/vendor/jquery.maskedinput.min.js b/public/js/vendor/jquery.maskedinput.min.js
diff --git a/views/bills/_reserve_fields.erb b/views/bills/_reserve_fields.erb
@@ -1,10 +1,10 @@
 <div class="form-group">
   <label for="phone_number"><%= I18n.t(:phone_number) %></label>
-  <input name="phone_number" type="text" autofocus class="form-control">
+  <input name="phone_number" type='tel' pattern='[\+]\d{2}\s[\(]\d{2}[\)]\s\d{4}[\-]\d{4}' title='+99 (99) 9999-9999' autofocus class="form-control" required>
 </div>
 <div class="form-group">
   <label for="email"><%= I18n.t(:email) %></label>
-  <input name="email" type="text" required value="<%= session['email']%>" class="form-control">
+  <input name="email" type="email" required value="<%= session['email']%>" class="form-control" required>
 </div>
 <div class="text-right">
   <button type="submit" class="btn btn-success"><%= I18n.t(:reserve_bill) %></button>

diff --git a/views/layout.erb b/views/layout.erb
@@ -59,6 +59,7 @@
     <script src="/js/vendor/jquery.tipsy.js"></script>
     <script src="/js/billbo.js"></script>
     <script src="/js/vendor/jquery.tinysort.min.js"></script>
+    <script src="/js/vendor/jquery.maskedinput.min.js"></script>
     <script type="text/javascript">
       window.i18n = <%= locale_labels %>
     </script>