[add] client side validation

et#6
tribikram 2 years ago
parent 6b8148167e
commit 6032e67d31
  1. 51
      resources/views/contact.blade.php

@ -70,21 +70,21 @@
<div class="col-md-6"> <div class="col-md-6">
<div class="form-group"> <div class="form-group">
<label for="">Email address</label> <label for="">Email address</label>
<input type="email" name = "email" class="form-control" placeholder="Your email address" value="" onkeyup="contactEmail()"> <input type="email" name = "email" class="form-control" placeholder="Your email address" value="" id="contact-email" onkeyup="contactEmail()">
</div> </div>
<span class="error" id='contact-email-error'></span> <span class="error" id='contact-email-error'></span>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="form-group"> <div class="form-group">
<label for="">Phone number</label> <label for="">Phone number</label>
<input type="number" name = "phone" class="form-control" placeholder="Your phone number" value="" onkeyup="contactPhone()"> <input type="number" name = "phone" class="form-control" placeholder="Your phone number" value="" id="contact-phone" onkeyup="contactPhone()">
</div> </div>
<span class="error" id='contact-phone-error'></span> <span class="error" id='contact-phone-error'></span>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="form-group"> <div class="form-group">
<label for="">Nationality</label> <label for="">Nationality</label>
<input type="text" name = "nationality" class="form-control" placeholder="Your nationality"> <input type="text" name = "nationality" class="form-control" placeholder="Your nationality" id="contact-nationality" onkeyup="contactNationality()">
</div> </div>
<span class="error" id='contact-nationality-error'></span> <span class="error" id='contact-nationality-error'></span>
</div> </div>
@ -135,9 +135,52 @@
} }
} }
function contactEmail(){
var email = document.getElementById('contact-email').value;
if(email.length == 0){
$('#contact-email').focus();
emailError.innerHTML = "Email field is required !";
return false;
}
else{
emailError.innerHTML = '';
return true;
}
}
function contactPhone(){
var phone = document.getElementById('contact-phone').value;
if(phone.length == 0){
$('#contact-phone').focus();
phoneError.innerHTML = "Phone number is required !";
return false;
}
if(!phone.match(/^\d{10}$/)){
phoneError.innerHTML = "Please provide valid 10 digit number";
return false;
}
else{
phoneError.innerHTML = '';
return true;
}
}
function contactNationality(){
var nationality = document.getElementById('contact-nationality').value;
if(nationality.length == 0){
$('#contact-nationality').focus();
nationalityError.innerHTML = "Nationality field is required !";
return false;
}
else{
nationalityError.innerHTML = '';
return true;
}
}
function validateContact(){ function validateContact(){
if(!contactFullname()){ if(!contactFullname() || !contactEmail() || !contactPhone() ||
!contactNationality()){
return false; return false;
} }
else{ else{

Loading…
Cancel
Save