user2875684
user2875684

Reputation: 11

Validating PHP Form Data Using Java Script

I am validating php form data using java script, but the form send the data without validating. Am I making any mistake in creating this form validation. HTM code is:

<form name="form1" action="sendmail.php" onSubmit="return validateform1();" method="post">
    <table>
        <tbody>
            <tr><td><input id="name" class="w200" name="name" type="text" value="Your Name" onFocus="if(this.value=='Your Name')this.value=''" onBlur="if(this.value=='')this.value='Your Name'"></td></tr>
            <tr><td><input id="cname" class="w200" name="cname" type="text" value="Company Name" onFocus="if(this.value=='Company Name')this.value=''" onBlur="if(this.value=='')this.value='Company Name'"></td></tr>
            <tr><td><input class="w200" name="email" type="text" value="Your Email ID" onFocus="if(this.value=='Your Email ID')this,value=''" onBlur="if(this.value=='')this.value='Your Email ID'"></td></tr>
            <tr><td><input class="w200" name="mno" type="text" value="Mobile No." onFocus="if(this.value=='Mobile No.')this.value=''" onBlur="if(this.value=='')this.value='Mobile No.'"></td></tr>
            <tr><td><input class="w200" name="country" type="text" value="Country" onFocus="if(this.value=='Country')this.value=''" onBlur="if(this.value=='')this.value='Country'"></td></tr>
            <tr><td><textarea class="w200n h60" name="message" cols="23" rows="4" onFocus="if(this.value=='Requirements')this.value=''" onBlur="if(this.value=='')this.value='Requirements'">Requirements</textarea></td></tr>
            <tr><td><input type="submit" value="Submit"><input name="reset" type="reset" value="Reset"></td></tr>
        </tbody>
    </table>
</form>

And the java script for this form validation is:

<script language="javascript">
    function validateform1() {
        if($document.form1.name.value=="") {
            alert("Enter Name");
            return false;
        }

        if($document.form1.cname.value=="") {
            alert("Please enter company name");
            return false;
        }

        if($document.form1.email.value=="") {
            alert("Please enter your email");
            return false;
        }

        if($document.form1.mno.value=="") {
            alert("Please enter your mobile no.");
            return false;
        }

        if($document.form1.country.value=="") {
            alert("Please enter country");
            return false;
        }
    }
</script>

Upvotes: 1

Views: 949

Answers (3)

Chris Mukherjee
Chris Mukherjee

Reputation: 841

If none of the conditions trigger and return false, you need to return true; at the end before your last closing squiggly bracket ( } ).

To clarify: I would write the function like this:

function validateform1() {
  if(document.form1.name.value=="") {
    alert("Enter Name");
    return false;
  }
  else if(document.form1.cname.value=="") {
    alert("Please enter company name");
    return false;
  }
  else if(document.form1.email.value=="") {
    alert("Please enter your email");
    return false;
  }
  else if(document.form1.mno.value=="") {
    alert("Please enter your mobile no.");
    return false;
  }
  else if(document.form1.country.value=="") {
    alert("Please enter country");
    return false;
  }
  return true;
}

Upvotes: 1

Amit Singh
Amit Singh

Reputation: 2275

There's no need to use $ in "$document"

You should use "document" only

This is what you should be try:

<script language="javascript">
function validateform1()
{
if(document.form1.name.value=="")
{
alert("Enter Name");
return false;
}
else if(document.form1.cname.value=="")
{
alert("Please enter company name");
return false;
}
else if(document.form1.email.value=="")
{
alert("Please enter your email");
return false;
}
else if(document.form1.mno.value=="")
{
alert("Please enter your mobile no.");
return false;
}
else if(document.form1.country.value=="")
{
alert("Please enter country");
return false;
}
else
{
    return true;
    }
}
</script>

and call the validateform1() on "onSubmit" event of the form.

Upvotes: 2

user2092317
user2092317

Reputation: 3338

simply do this for all fields, because you already have the value assigned for the input type as Your Name, we need to check if it is either Your name or null

if(document.form1.name.value=="Your Name" || document.form1.name.value=="")

Upvotes: 1

Related Questions