I'm having problems with validation in javascript

Question

I am new to PHP, I had a problem in registering a user in Database. I want to first validate the form using javascript then form action to perform which will redirect it to another page containing PHP code and SQL queries. But the problem is it only validates Username and Email. No other field is checked by javascript. Register.php

<script type = "text/javascript"> 
function initthis() {
    document.getElementById("signup").disabled = true;
}

function dis_enable_submit() {
    if (document.getElementById("t&d").checked == 1) {
        document.getElementById("signup").disabled = false;
        document.getElementById("signup").className = "enabled";
    } else {
        document.getElementById("signup").disabled = true;
        document.getElementById("signup").className = "disabled";

    }
}
window.onload = initthis;

function validateForm() {
    var a = document.forms["register"]["duser"].value;
    var b = document.forms["register"]["demail"].value;
    var c = document.forms["register"]["dcemail"].value;
    var d = document.forms["register"]["dpwd"].value;
    var e = document.forms["register"]["dcpwd"].value;

    if (a == null || a == "") {
        document.getElementById("duser").style.background = "#FDFCDC";
        return false;
    }

    var atpos = b.indexOf("@");
    var dotpos = b.lastIndexOf(".");
    if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= b.length) {
        document.getElementById("demail").style.background = "#FDFCDC";
        return false;
    } else {
        document.getElementById("tick").src = "images/tick.gif";
    }
    if (c == null || c == "") {
        document.getElementById("dcemail").style.background = "#FDFCDC";
        alert("Email doesn't match");
        return false;
    }

    if (c != b) {
        alert("Email doesn't match");
        return false;
    }

    if (d == null || d == "") {
        document.getElementById("dpwd").style.background = "#FDFCDC";
        return false;
    }

    if (e == null || e == "") {
        document.getElementById("dcpwd").style.background = "#FDFCDC";
        alert("Password doesn't match");
        return false;
    }


    if (e != d) {
        alert("Password doesn't match");
        return false;
    }


}

This is FORM which is to be validate

<form name="register" onsubmit="return validateForm();" method="post" action="getdata.php">
    <table border="0">
        <tr>
            <td colspan="2" style="background:url('images/register.jpg') no-repeat; height:50px; width: 350px;"></td>
        </tr>
        <tr>
            <td>
                <label>*Username:</label>
            </td>
            <td>
                <input name="duser" id="duser" value="" type="text" spellcheck="false" size="20" />
            </td>
        </tr>
        <tr>
            <td>
                <label>*Email:</label>
            </td>
            <td>
                <input name="demail" id="demail" value="" type="text" size="20" />
            </td>
        </tr>
        <tr>
            <td>
                <label>*Confirm Email:</label>
            </td>
            <td>
                <input name="dcemail" id="dcemail" value="" type="text" size="20" />
            </td>
        </tr>
        <tr>
            <td>
                <label>*Password:</label>
            </td>
            <td>
                <input name="dpwd" id="dpwd" value="" type="password" size="20" />
            </td>
        </tr>
        <tr>
            <td>
                <label>*Confirm Password:</label>
            </td>
            <td>
                <input name="dcpwd" id="dcpwd" value="" type="password" size="20" />
            </td>
        </tr>
        <tr>
            <td>
                <label>*Gender:</label>
            </td>
            <td>
                <input type="radio" name="gender" id="gender" value="1">Male
                <input type="radio" name="gender" value="0">Female</td>
        </tr>
        <tr>
            <td>
                <label>Birthday:</label>
            </td>
            <td>
                <input name="bday" id="bday" type="date" size="20" />
            </td>
        </tr>
        <tr>
            <td align="middle">
                <input id="signup" class="button" type="submit" value="Sign Up" style="font-size:15px;" />
            </td>
        </tr>
    </table>
</form>

getdata.php

<?php
$_POST[duser];
$_POST[demail];
$_POST[dpwd];
$_POST[gender];

$con=mysqli_connect("localhost","root","root","MyDB");
// Check connection
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }

mysqli_query($con,"INSERT INTO Users (UserName, Email, Password, Gender)
VALUES ('$_POST[duser]', '$_POST[demail]','$_POST[dpwd]',$_POST[gender] )");

mysqli_close($con);


header("Location: successful.php");
exit();

?>

Answer 1

It is not running your validateForm() function because you have not called that function anywhere.

Suggestion based on existing code:

<input onclick="return validateform()" id="signup" class="button" type="submit" value="Sign Up" style="font-size:15px;" />

This should run the validation when you press the button and only complete the SUBMIT if that function returns TRUE.

So you will also have to add a return true; to the end of the function so if it passes all the tests i.e. does not do a return false; it will return true, which is not the default.

Answer 2

Here is some sample code.

<head>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
            <script>
            $.validator.setDefaults({
            submitHandler: function() { alert("submitted!"); }
         });

         $().ready(function() {
             // validate the comment form when it is submitted
             $("#commentForm").validate();

         });
        </script>

    </head>



    <form id="commentForm" class="formular" method="post" action="" style="width:600px">
                <p class="name">
                    <input value="" class="text-input" type="text" name="fullname" id="fullname" required />
                    <label for="fullname">Name</label>
                </p>
                <p class="email">
                    <input value="" class="text-input" type="text" name="email" id="email" required />
                    <label for="email">E-mail</label>
                </p>
                <p class="web">
                    <input type="text" name="web" id="web" />
                    <label for="web">Website</label>
                </p>
                <p class="text">
                    <textarea name="text" class="text-input" id="comment" required></textarea>
                </p>
                <p class="submit">
                    <input type="submit" id="submit" value="Send" />
                </p>
            </form>

Answer 3

FYI: Be more descriptive when asking for help or simply explain what you want to do, you will get a rapid response as opposed to copying the code from the internet and wonder why it's not working. I see you have dis_enable_submit() function, but I can't see where you calling it. You can also make use of jsfiddle.net/‎ if you have such long files.