javascript form validation using 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>

You look in the error log of your web server. For example if you're using Apache on Ubuntu, go to /var/log/apache/error.log but it depends on your configuration. — Difster, Jul 04 '17 at 03:56
I don't know where your logs are then. Check the xampp documentation. — Difster, Jul 04 '17 at 04:11

Rence · Answer 1 · 2017-07-04T05:12:34.053

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

thanks a lot.. i will try it now..will update u once edited @lourz_yan — Brian May, Jul 04 '17 at 04:22

javascript form validation using php

1 Answers1