javascript form validation using php - php

Question

checkEmpty validation is not working. functions are not executing in the PHP file. I tried below code please help me to understand where I am wrong.
My Code in my index.php file.
<div class="main_wrapper">
<form name="myform" method="post" action="test1.php">
<div class="head_wrapper">
Rollno : <input type="text" name="id" onblur="checkEmpty('id')" value="<?php echo $id; ?>"/></br></br>
Name : <input type="text" name="name" onblur="checkEmpty('name')" value="
<?php echo $name; ?>"/></br></br>
Email : <input type="text" name="email" onblur="checkEmpty('email')"
value="<?php echo $email; ?>"/></br></br>
Phone : <input type="number" name="phone" onblur="checkEmpty('phone')"
value="<?php echo $phone; ?>"/></br></br>
Address : <input type="text" name="address" onblur="checkEmpty('address')"
value="<?php echo $address; ?>"/></br></br>
Dept_code: <input type="text" name="dept_code"
onblur="checkEmpty('dept_code')" value="<?php echo $dept_code; ?>"/></br>
</br>
</div>
<div class="foot_wrapper">
<input type="submit" name="insert" value="Addinfo"/>
<input type="submit" name="update" value="Modify"/>
<input type="submit" name="delete" value="Delete"/>
<input type="submit" name="search" value="Find"/>
<input type="submit" name="display" value="Display"/>
</div>
</form>
</div>
</body>
<script src="validation.js">
function checkEmpty(field)
{
var fn = document.getElementById(field).value;
if (fn == "" || fn = null)
{
alert("Fill the box");
}
}
function validEmail(email)
{
var fn = document.getElementById(email).value;
var format = /.+#.+/;
if (!fn.match(format))
{
alert("Enter valid mail");
}
}
</script>

Answer 1

First: you need to put id on your input tags if you gonna use the getElementById
<input type="text" name="id" onblur="checkEmpty('id')" value="<?php echo $id; ?>" id="id" /> //it is better to use id the same as the name
Second: inside the checkEmpty function you need to fix the
if(fn==""||fn=null) //change the fn=null to fn == null
{
alert("Fill the box");
}
third: I wouldn't recommend using the alert("Fill the box") because you are using the onblur method, once you try to skip the field for id/Rollno
1. The focus will be on the next input which is for the 'Name'.
2. The alert will be triggered and will say to 'fill the box' for the 'Rollno'
3. Once the alert shows, it will also trigger the onblur method for the 'Name'
4.Then it will loop showing the alert
I would recommend to put a hidden span that will act as an alert to the user, which will show if the user left the field blank
<input type="text" name="id" onblur="checkEmpty('id')" value="" id="id"/><span id="alertForId" hidden="" class="alerts">Fill the this field first.</span></br></br>
and your checkEmpty function will somehow look like:
function checkEmpty(field)
{
console.log(field);
var fn=document.getElementById(field).value;
if(fn==""||fn==null)
{
if(field == "id")
{
$("#alertForId").show();
}
}else $(".alerts").hide();
}
I put a class 'alerts' to the span to hide them in case the field is not empty, but it will hide all the spans. Just try to configure the code an hope it will help you.
Here is the code configured based from your code:
<div class="main_wrapper">
<form name="myform" method="post" action="index.php">
<div class="head_wrapper">
Rollno : <input type="text" name="id" id="id" onblur="checkEmpty('id')" value=""/><span id="alertForId" class="alerts" hidden="">Fill the this field first.</span></br></br>
Name : <input type="text" name="name" id="name" onblur="checkEmpty('name')" value=""/><span id="alertForName" class="alerts" hidden="">Fill the this field first.</span></br></br>
Email : <input type="text" name="email" id="email" onblur="checkEmpty('email')" value=""/><span id="alertForEmail" class="alerts" hidden="">Fill the this field first.</span></br></br>
Phone : <input type="number" name="phone" id="phone" onblur="checkEmpty('phone')" value=""/><span id="alertForPhone" class="alerts" hidden="">Fill the this field first.</span></br></br>
Address : <input type="text" name="address" id="address" onblur="checkEmpty('address')" value=""/><span id="alertForAddress" class="alerts" hidden="">Fill the this field first.</span></br></br>
Dept_code: <input type="text" name="dept_code" id="dept_code" onblur="checkEmpty('dept_code')" value=""/><span id="alertForIdDeptCode" class="alerts" hidden="">Fill the this field first.</span></br>
</br>
</div>
<div class="foot_wrapper">
<input type="submit" name="insert" value="Addinfo"/>
<input type="submit" name="update" value="Modify"/>
<input type="submit" name="delete" value="Delete"/>
<input type="submit" name="search" value="Find"/>
<input type="submit" name="display" value="Display"/>
</div>
</form>
</div>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
// validation.js is here
//validation
function checkEmpty(field)
{
var fn=document.getElementById(field).value;
if(fn==""||fn==null)
{
if(field == "id")
$("#alertForId").show();
if(field == "name")
$("#alertForName").show();
if(field == "email")
$("#alertForEmail").show();
if(field == "phone")
$("#alertForPhone").show();
if(field == "address")
$("#alertForAddress").show();
if(field == "dept_code")
$("#alertForIdDeptCode").show();
} else{
if(field == "id")
$("#alertForId").hide();
if(field == "name")
$("#alertForName").hide();
if(field == "email")
$("#alertForEmail").hide();
if(field == "phone")
$("#alertForPhone").hide();
if(field == "address")
$("#alertForAddress").hide();
if(field == "dept_code")
$("#alertForIdDeptCode").hide();
}
}
function validEmail(email)
{
var fn=document.getElementById(email).value;
var format=/.+#.+/;
if(!fn.match(format))
{
alert("Enter valid mail");
}
}
</script>
</body>'
changes I made:
I just put your javascript inside the same page
Just link a jquery.js