I am working with form in HTML and, I had validated it using PHP, but I want to display an error message for the user when he/she type something and, I did it javascript.
Currently, it is not working as I want, it just stops showing messages after the first input, so any help, please?
HTML :
<!--form-->
<form id="form" onSubmit="return shouldISubmit()" action="updateprofile.php" method="post" >
<h1>ABOUT YOU</h1>
<?php
foreach($rs as $row)
{
?>
<input type="hidden" name="uid" value="<?php echo $row['Uid'];?> ">
<div class="inputwrapper">
<label for="username">Username</label>
<input type="text" id="username" name="username" value="<?php echo $row['username']; ?>" disabled />
</div>
<div class="inputwrapper">
<label for="name">Name</label>
<input type="text" autocomplete="off" onKeyUp="namevalidation(this.value)" name="uname" placeholder="<?php echo $row['name']; ?> "/>
<span class="error" id="name_error"></span>
</div>
<div class="inputwrapper">
<label for="phone">Phone number</label>
<input type="text" onkeyup=" phoneValidation(this.value)" name="phone" placeholder="<?php echo $row['phone']; ?>"/>
<span class="error" id="phone_error"></span>
</div>
<div class="inputwrapper">
<label for="email">Email </label>
<input type="text" onkeyup="emailAddressValidation(this.value)" name="email" placeholder="<?php echo $row['email']; ?>">
<span class="error" id="email_error"></span>
</div>
<hr>
<h2>Address</h2>
<div class="inputwrapper">
<label for="city">City</label>
<input type="text" oninput="cityValidation(this.value)" name="city" placeholder="<?php echo $row['city']; ?>"/>
<span class="error" id="city_error"></span>
</div>
<div class="inputwrapper">
<label for="house">House</label>
<input type="text" onkeyup="houseValidation(this.value)" name="house" placeholder="<?php echo $row['House']; ?>"/>
<span class="error" id="house_error"></span>
</div>
<div class="inputwrapper">
<label for="block">Block</label>
<input type="text" onkeyup="blockValidation(this.value)" name="block" placeholder="<?php echo $row['Block']; ?>" />
<span class="error" id="block_error"></span>
</div>
<div class="inputwrapper">
<label for="road">Road</label>
<input type="text" onkeyup="roadValidation(this.value)" name="road" placeholder="<?php echo $row['Road']; ?>"/>
<span class="error" id="road_error" ></span>
</div>
<br>
<input type="hidden" name="JS" value="false" />
<?php } ?>
<div class="btnstyle">
<button type="submit" class="button" name="update" value="update">Update</button></div>
</form>
<!-- end of(form)-->
Javascript:
var namevalid=emailvalid=roadvalid=blockvalid=phonevalid=cityvalid=housevalid=false;
// Email Address Validation
function emailAddressValidation(email){
var validEmailAddress=/^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+.[a-zA-Z.]{2,5}$/;
document.getElementById('email_error').style.color="red";
if(email.length==0)
{
document.getElementById('email_error')="Email Address is required";
emailvalid=false;
}else if(!validEmailAddress.test(email)){
document.getElementById('email_error')="email is not well formated";
emailvalid=false;
}else{
document.getElementById('email_error').style.color="white";
document.getElementById('email_error')="";
emailvalid=true;
}
}
function namevalidation(name){
document.getElementById('name_error').style.color="red";
var validName=/^[a-zA-Z-' ]*$/;
if(name.length==0)
{
document.getElementById('name_error').innerHTML="Name is required";
namevalid=false;
}else if(!validName.test(name)){
document.getElementById('name_error').innerHTML=" Name must be only string with white spaces";
namevalid=false;
}else{
document.getElementById('name_error').style.color="white";
document.getElementById('name_error').innerHTML="";
namevalid=true;
}
}
// Phone Validation
function phoneValidation(phone){
var validMobileNumber=/^[36][0-9-' ]{7}$/;
document.getElementById('phone_error').style.color="red";
if(phone.length==0)
{
document.getElementById('phone_error')="Mobile Number is required";
phonevalid=false;
}
else if(!validMobileNumber.test(phone)){
document.getElementById('phone_error')="Mobile Number must be a number";
}
else if(phone.length!=8){
document.getElementById('phone_error')="Mobile Number must have 8 digits";
phonevalid=false;
}
else{
document.getElementById('phone_error').style.color="white";
document.getElementById('phone_error').innerHTML="";
phonevalid=true;
}
}
// city Validation
function cityValidation(city){
var validcity=/^[a-zA-Z-' ]*$/;
document.getElementById('city_error').style.color="red";
if(city.length==0)
{
cityvalid=false;
document.getElementById('city_error')="City is required";
}else if(!validcity.test(city)){
cityvalid=false;
document.getElementById('city_error')="City must contains Only letters and white space allowed";
}
else{
document.getElementById('city_error').style.color="white";
document.getElementById('city_error')="";
cityvalid=true;
}
}
// house Validation
function houseValidation (house){
var validhouse=/^[0-9-' ]*$/;
document.getElementById('house_error').style.color="red";
if(house.length==0)
{
housevalid=false;
document.getElementById('house_error')="house number is required";
}else if(!validhouse.test(house)){
housevalid=false;
document.getElementById('house_error')="House number must contains Only numbers";
}
else{
document.getElementById('house_error').style.color="white";
document.getElementById('house_error')="";
housevalid=true;
}
}
// road Validation
var road= document.getElementById("road");
function roadValidation(road){
var validroad=/^[0-9-' ]*$/;
document.getElementById('road_error').style.color="red";
if(road.length==0)
{
document.getElementById('road_error')="Road number is required";
roadvalid=false;
}else if(!validroad.test(roadValue)){
document.getElementById('road_error')="Road number must contains Only numbers";
roadvalid=false;
}
else{
document.getElementById('road_error').style.color="white";
document.getElementById('road_error')="";
roadvalid=true;
}
}
// block Validation
function blockValidation(block){
var validblock=/^[0-9-' ]*$/;
document.getElementById('block_error').style.color="red";
if(block.length==0)
{
document.getElementById('block_error')="Block number is required";
blockvalid=false;
}else if(!validblock.test(blockValue)){
document.getElementById('block_error')="Block number must contains Only numbers";
blockvalid=false;
}
else{
document.getElementById('block_error').style.color="white";
document.getElementById('block_error')="";
blockvalid=true;
}
}
function shouldISubmit(){
document.forms[0].JS.value="true";
if(namevalid && emailvalid && roadvalid && blockvalid && phonevalid && cityvalid && housevalid)
return true;
else
return false;
}