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();

?>

You'll be a lot better off validating the form on the server side with PHP. Javascript validation can be bypassed very easily by anyone by disabling Javascript in their browser. — John Dorean
– John Dorean, Commented Aug 13, 2013 at 11:35
I want validation process just as google, where validation is done at the time when we leave the input field. Can u suggest something for that? — RDX
– RDX, Commented Aug 13, 2013 at 11:43
@ChrisWhite validating on the server side should always be done but it doesn't mean you shouldn't also validate on the client side, in the majority of cases this will reduce the number requests to the server. — Jake Aitchison
– Jake Aitchison, Commented Aug 13, 2013 at 11:44
They do that with javascript but they also do it in the backend (server side) because of the reasone mentioned by @ChrisWhite — Martin Tale
– Martin Tale, Commented Aug 13, 2013 at 11:44

Harmony Proxy Mothibe · Accepted Answer · 2013-08-13 11:52:47Z

1

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.

answered Aug 13, 2013 at 11:52

Harmony Proxy Mothibe

741 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RDX Over a year ago

Here I am calling dis_enable_submit() function

<tr> <td> <input id="t&d" type="checkbox" value="0" tabindex="3" onclick="dis_enable_submit();"/><span> I agree all </span><a href="#">Terms & Conditions</a> </td> </tr>

AdRock · Accepted Answer · 2013-08-13 11:56:42Z

0

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>

answered Aug 13, 2013 at 11:56

AdRock

3,12610 gold badges71 silver badges109 bronze badges

2 Comments

RDX Over a year ago

I want to use javascript as I don't know about JQuery.

AdRock Over a year ago

Jquery is a JavaScript library and you can do so much stuff with it. There are a lot of examples online and this is where i found this

RiggsFolly · Accepted Answer · 2013-08-13 11:58:09Z

0

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.

answered Aug 13, 2013 at 11:58

RiggsFolly

94.7k22 gold badges108 silver badges152 bronze badges

3 Comments

RDX Over a year ago

I had called valdateForm() function here <form name="register" onsubmit="return validateForm();" method="post" action="getdata.php">

RiggsFolly Over a year ago

Woops, I missed that. Sorry.

Harry Over a year ago

@RiggsFolly Most of us did, it didn't appear initially because of code block formatting issues :)

Collectives™ on Stack Overflow

I'm having problems with validation in javascript

3 Answers 3

1 Comment

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related