Thu Apr 17 2025
4 : 23 : 06 AM

Khmer Web

Gateway to web application
Validate Form
ថ្ងៃ សៅរ៍ ទី ១០ តុលា ២០២០
Edit
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#\controllers\customer.py
import config, re, json
from bottle import template, route, request, redirect
 
@route('/customer')
def displayCustomer():
  return template('customer', data=config.kargs)
 
@route('/custform')
def getCustomerForm():
  return template('custform', data=config.kargs)
   
@route('/customer', method="POST")
def getFormData():
  name = request.forms.get("fname")
  phone = request.forms.get("fphone")
 
  if not re.match(r"^(\+\d{1,2}\s?)?1?\-?\.?\s?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$", phone):
    config.kargs['message'] = "You need to enter a right phone number."
    return template('custform', data=config.kargs)
 
  else:
    redirect('/customer')
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!--\views\custform.tpl-->
 
%include("./partials/header.tpl")
 
<style>
#custform{
  margin-top: 30px;
  width: 30%;
  display: grid;
  grid-template-columns: auto calc(85% - 5px);
  grid-gap: 5px;
}
#custform a{
  text-align: right;
}
</style>
 
<div class="main" id="main">
  <div class="content" id="content">
    <span>CUSTOMER ENTRY FORM</span>
     
    <form id="custform" method="POST" action="/customer" onsubmit="return bicycle.customerForm('custform')">
      <a>Name:</a><input name="fname" type="text" required="">
      <a>Phone:</a><input name="fphone" type="text" required="">
      <a></a><input type="submit">
    </form>
     
    <p>{{data['message']}}</p>
    %data['message'] = ""
  </div><!--content-->
 
</div><!--main-->
 
%include("./partials/footer")
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//\public\js\main.js
class Bicycle{
 
  customerForm(formId){
    var name = document.forms[formId]['fname'].value;
    var phone = document.forms[formId]['fphone'].value;
   
    if((name == "") || (phone == "")){
      alert("Please fill this form with your name and phone number!");
      return false;
    }else{
      var phoneRegex = /^(\+\d{1,2}\s?)?1?\-?\.?\s?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/;
      var numberResult = phoneRegex.test(phone);
      if(!numberResult){
        alert("Please fill this form with the right phone number.");
        return false;
      }
    }
  }
   
}//end of class
 
var bicycle = new Bicycle();

GitHub: https://github.com/Sokhavuth/Rental-Bicycle-App
Heroku: https://khmerweb-rba.herokuapp.com/