tribikram
/
ET-VISA
1
0
Fork 0
Code Issues 24 Pull Requests 15 Packages Projects 1 Releases Wiki Activity

[add] personal detail validation

Browse Source
tribikram 3 years ago
parent 92b515bd80
commit b6996de6ec
2 changed files with 144 additions and 8 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      public/frontend/css/style.css
  2. 147
      resources/views/enquiry-form.blade.php

5
public/frontend/css/style.css
Unescape View File

@ -1742,6 +1742,11 @@ table.lightgrey-weekends tbody td:nth-child(n+6) {
box-shadow: none;
border-color: none;
}
.error{
color: red;
font-size: 14px;
line-height: 1.8rem;
}
/* enquiry page css ends */
/* Footer Css */

147
resources/views/enquiry-form.blade.php
Unescape View File

@ -12,31 +12,34 @@
<section class="enquiry-form-section">
<h2>Enquiry Form</h2>
<p>Please fill up the form and we will get back to you soon, Thanks !</p>
<form action="">
<form onsubmit="return submitEnquiry()">
<div class="row enquiry-form-row">
<h3>Personal Details</h3>
<div class="col-md-4">
<div class="form-group mb-3">
<label for="name">First Name</label>
<input type="text" class="form-control mt-2" id="fname" name="first_name" placeholder="Enter your First name" required>
<input type="text" class="form-control mt-2" id="fname" name="first_name" value="" placeholder="Enter your First name" onkeyup="validatefName()">
<span class="error" id="error-fname"></span>
</div>
</div>
<div class="col-md-4">
<div class="form-group mb-3">
<label for="name">Middle Name</label>
<input type="text" class="form-control mt-2" id="mname" name="middle_name" placeholder="Enter your Middle name">
<input type="text" class="form-control mt-2" id="mname" name="middle_name" value="" placeholder="Enter your Middle name">
</div>
</div>
<div class="col-md-4">
<div class="form-group mb-3">
<label for="name">Last Name</label>
<input type="text" class="form-control mt-2" id="lname" name="last_name" placeholder="Enter your Last name" required>
<input type="text" class="form-control mt-2" id="lname" name="last_name" value="" placeholder="Enter your Last name" onkeyup="validatelName()">
<span class="error" id="error-lname"></span>
</div>
</div>
<div class="col-md-4">
<div class="form-group mb-3">
<label for="name">Date of birth</label>
<input type="date" class="form-control mt-2" id="dob" name="dob" placeholder="Enter your Date of birth" required>
<input type="date" class="form-control mt-2" id="dob" name="dob" placeholder="Enter your Date of birth" onkeyup="validateDob()">
<span class="error" id="error-dob"></span>
</div>
</div>
<div class="col-md-4">
@ -48,6 +51,7 @@
<option value="{{$country->id}}" @if(old('country_id') === $country->id) selected @endif>{{$country->name}}</option>
@endforeach
</select>
<span class="error" id="error-cob"></span>
</div>
</div>
<div class="col-md-4">
@ -73,24 +77,28 @@
</label>
</div>
</div>
<span class="error" id="error-gender"></span>
</div>
</div>
<div class="col-md-4">
<div class="form-group mb-3">
<label for="name">Address</label>
<input type="text" class="form-control mt-2" id="address" name="address" placeholder="Enter your Address" required>
<input type="text" class="form-control mt-2" id="address" name="address" placeholder="Enter your Address" onkeyup="validateAddress()">
<span class="error" id="error-address"></span>
</div>
</div>
<div class="col-md-4">
<div class="form-group mb-3">
<label for="name">Email</label>
<input type="email" class="form-control mt-2" id="email" name="email" placeholder="Enter your Email Address" required>
<input type="email" class="form-control mt-2" id="email" name="email" placeholder="Enter your Email Address" onkeyup="validateEmail()">
<span class="error" id="error-email"></span>
</div>
</div>
<div class="col-md-4">
<div class="form-group mb-3">
<label for="name">Phone</label>
<input type="text" class="form-control mt-2" id="phone" name="phone" placeholder="Enter your Phone Number" required>
<input type="text" class="form-control mt-2" id="phone" name="phone" placeholder="Enter your Phone Number" onkeyup="validatePhone()">
<span class="error" id="error-phone"></span>
</div>
</div>
@ -242,6 +250,15 @@
@endsection
@section('script')
<script>
fnameError = document.getElementById('error-fname');
lnameError = document.getElementById('error-lname');
dobError = document.getElementById('error-dob');
cobError = document.getElementById('error-cob');
GenderError = document.getElementById('error-gender');
addressError = document.getElementById('error-address');
emailError = document.getElementById('error-email');
phoneNumberError = document.getElementById('error-phone');
function maritalStatus(){
var marriedDate = document.getElementById('spouse-married-date');
var spouseAcademic = document.getElementById('spouse-academic');
@ -283,5 +300,119 @@
salaryMode.classList.remove('married');
}
}
function validatefName(){
firstName = document.getElementById('fname').value;
if(firstName.length == 0){
$('#fname').focus();
fnameError.innerHTML = "First Name is required !";
return false;
}else{
fnameError.innerHTML = "";
return true;
}
}
function validatelName(){
lastName = document.getElementById('lname').value;
if(lastName.length == 0){
$('#lname').focus();
lnameError.innerHTML = "Last Name is required !";
return false;
}else{
lnameError.innerHTML = "";
return true;
}
}
function validateDob(){
var dob = document.getElementById('dob').value;
if(dob == ""){
$('#dob').focus();
dobError.innerHTML = "Date of birth is required!";
return false;
}
dobError.innerHTML = '';
return true;
}
function eCob(){
var cob = document.getElementById('e-cob').value;
if(cob == ""){
$('#e-cob').focus();
cobError.innerHTML = "Country of birth is required!";
return false;
}
cobError.innerHTML = '';
return true;
}
function eGender(){
var valid = false;
var gender = document.getElementsByClassName("gender");
for(var i=0;i<gender.length;i++){
if(gender[i].checked){
valid = true;
break;
}
}
if(valid){
GenderError.innerHTML = '';
return true;
}else{
GenderError.innerHTML = "Please select your gender!";
return false;
}
}
function validateAddress(){
var address = document.getElementById('address').value;
if(address.length == 0){
$('#address').focus();
addressError.innerHTML = "Address field is required!";
return false;
}
addressError.innerHTML = '';
return true;
}
function validateEmail(){
var email = document.getElementById('email').value;
if(email.length == 0){
emailError.innerHTML = "Email is required!";
return false;
}
if(!email.match(/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(.\w{2,3})+$/)){
emailError.innerHTML = "Invalid email address";
return false;
}
emailError.innerHTML = '';
return true;
}
function validatePhone(){
var phone = document.getElementById('phone').value;
if(phone.length == 0){
$('#phone').focus();
phoneNumberError.innerHTML = "Mobile number is required!";
return false;
}
if(!phone.match(/^\d{10}$/)){
phoneNumberError.innerHTML = "Invalid mobile number";
return false;
}
phoneNumberError.innerHTML = '';
return true;
}
function submitEnquiry(){
if(!validatefName() || !validatelName() || !validateDob() || !eCob() || !eGender() ||
!validateAddress() || !validateEmail() || !validatePhone()){
return false;
}else{
}
}
</script>
@endsection

Write Preview
Loading…
Cancel
Save