Jump to content
Please Use CODE Tags

PHP Form Validation HELP

Sergio45
By Sergio45
in Programming
 Share
Go to solution Solved by Cruorzy,
5 minutes ago, Sergio45 said:

That's the thing, I am barely getting into PHP and I just need a little push to get me on the right path on the validating with PHP.

JavaScrupt is like HTML, you can edit it and completely change what you want for yourself. It does not affect other but if you ONLY validate stuff with Javascript then somebody will try to edit that and ignore your rules.

 

So what you do is make a PHP validation for this, since it server-side they cant change anything about it. And you use JavaScript to make it User friendly. for example make the box red if it does not follow your rules.

 

Things like password hasing etc is the exact same thing, use a Server-Side language for that. Dont do that stuff with Javascript :)

Posted

Hello everyone,

 

This is the first time that I am working with PHP and validating forms with PHP. I am trying to validate and format the following:

restaurantName: Capitalize the first letter of the name.

dinnerTab: auto format for 2 decimals.

 

Where I am having issues is starting the validation with PHP.

I have it so when the they press the button a second page is loaded showing the DATE, RESTAURANT NAME, DINNER TAB, TIP, and TOTAL. 

 

Any help would be appreciated!

 

FIRST PAGE: 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="author" content="Sergio Ochoa">
    <meta name="description" content="Main Page, School">
    <meta name="keywords" content="Sergio,ABoutMe">

    <title>PayBack,Inc.</title>
    <script type="text/javascript" src="JS/weights.js"></script>
    <script type="text/javascript" src="JS/toTitleCase.js"></script>
    <script type="text/javascript" src="JS/IntegerKeyPress.js"></script>
    <script type="text/javascript" src="JS/FormatNumber.js"></script>
    <script type="text/javascript" src="JS/isDate.js"></script>
    <script type="text/javascript" src="JS/DateFormat.js"></script>
    <script type="text/javascript" src="JS/javaS.js"></script>





    <style type="text/css">
        #header {
            text-align: center;
         
        }
        
        #main {
            clear: both;
        }
        
        form {
            clear: both;
            padding: 10px;
            min-width: 550px;
        }
        label
        {
            text-align: right;
            float: left;
            width: 12em;
            padding-right: .5em;
            vertical-align: top;
            
        }
        
        input,
        select,
        textarea,
        fieldset {
            margin-bottom: .5em;
        }
        
        .numberInputSyle {
            text-align: right;
        }
        
        body
        {
            background-color: wheat;
        }

    </style>



</head>

<body>


    
    
    
    
    
    
    


    <div id="header">
        <img class="leftPicture" src="Images/Corgi.png" alt="Company logo" width="300" height="152" style="float:left" />

        <img class="rightPicture" src="Images/Corgi.png" alt="Company logo" width="300" height="152" style="float:right" />
        <h1>Payback,Inc.</h1>
          <h2>Dinner Reimbursement form</h2>
        
    </div>
    


    <div id="main">

        <form id="frmWeight" method="post" action="results.php">

            <label for='txtRestaurantName'>Restaurant Name:</label>
            <input type="text" name="restaurantName" id='txtRestaurantName'required>
            <br>

            <label for='dtbSampleDate'>Date:</label>
            <input type="date" name="sampleDate" id="dtbSampleDate" required>
            <br>
            
            <label for='txtDinnerTab'>Dinner Tab:</label>
            <input type='number' name='dinnerTab' id='txtDinnerTab' required>
            <br>
            
            <button type="submit" class="buttonStyle" id='btnSubmit' name="btnSubmit">Calculate Tip</button>

            <button type="reset" class="buttonStyle" id="btnReset" name="btnReset">Clear</button>


        </form>
    </div>



    
    
    
    


</body>

</html>

SECOND PAGE: 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="author" content="Sergio Ochoa">
    <meta name="description" content="Main Page, School">
    <meta name="keywords" content="Sergio,ABoutMe">

    <title>Payback,Inc.</title>






    <style type="text/css">
        #header {
            text-align: center;
        }
        
        #main {
            clear: both;
        }
        
        body {
            background-color: wheat;
        }

    </style>



</head>

<body>



    <div id="header">
        <img class="leftPicture" src="Images/Corgi.png" alt="Company logo" width="300" height="152" style="float:left" />


        <img class="rightPicture" src="Images/Corgi.png" alt="Company logo" width="300" height="152" style="float:right" />

        <h1>Payback,Inc. </h1>
        <h2>Dinner Reimbursement form</h2>
    </div>
    

    
    <?php extract($_REQUEST); ?>
	<form method="post" action="nextPage.php">
		<input type="hidden" name="sampleDate" value="<?php echo $sampleDate; ?>">
		<!-- put a button here -->
	</form>
    
    
    <div id="main">
        
        
         <?php
        
        $totalTip = $dinnerTab * .20;
        $totalBill= $totalTip + $dinnerTab;
        
        $refundDate = new DateTime($sampleDate);
			$refundDate->modify("+2 week");
        
        
        
        ?>
        

        <p>Date:
            <?php echo $sampleDate;?>
        </p>
     

        <p>Restaurant Name:
        <?php echo $_REQUEST['restaurantName'];?>
        </p>
      

        <p>Dinner Tab: $<?php echo $dinnerTab;?>
        </p>
       

        <p>Tip: $<?php echo $totalTip;?></p>
       
        <p>Total: $<?php echo $totalBill;?></p>
        <br>
       
        <p>Be sure to submit for reimbursement by <strong><?php echo $refundDate->format('Y-m-d');?></strong></p>


       
        
        
        
        


    </div>





</body>

</html>

 

Pages.zip

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

This is what I got so far. Heading to bed I be back tomorrow.

Pages.zip

 

First Page: 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="author" content="Sergio Ochoa">
    <meta name="description" content="Main Page, School">
    <meta name="keywords" content="Sergio,ABoutMe">

    <title>PayBack,Inc.</title>
    <script type="text/javascript" src="JS/weights.js"></script>
    <script type="text/javascript" src="JS/toTitleCase.js"></script>
    <script type="text/javascript" src="JS/IntegerKeyPress.js"></script>
    <script type="text/javascript" src="JS/FormatNumber.js"></script>
    <script type="text/javascript" src="JS/isDate.js"></script>
    <script type="text/javascript" src="JS/DateFormat.js"></script>
    <script type="text/javascript" src="JS/javaS.js"></script>
    <script type="text/javascript" src="JS/script.js"></script>





    <style type="text/css">
        #header {
            text-align: center;
        }
        
        #main {
            clear: both;
        }
        
        form {
            clear: both;
            padding: 10px;
            min-width: 550px;
        }
        
        label {
            text-align: right;
            float: left;
            width: 12em;
            padding-right: .5em;
            vertical-align: top;
        }
        
        input,
        select,
        textarea,
        fieldset {
            margin-bottom: .5em;
        }
        
        .numberInputSyle {
            text-align: right;
        }
        
        body {
            background-color: wheat;
        }

    </style>



</head>

<body>










    <div id="header">
        <img class="leftPicture" src="Images/Corgi.png" alt="Company logo" width="300" height="152" style="float:left" />

        <img class="rightPicture" src="Images/Corgi.png" alt="Company logo" width="300" height="152" style="float:right" />
        <h1>Payback,Inc.</h1>
        <h2>Dinner Reimbursement form</h2>

    </div>





    <div id="main">

        <form id="frmWeight" method="post" action="results.php">

            <label for='txtRestaurantName'>Restaurant Name:</label>
            <input type="text" name="restaurantName" id='txtRestaurantName'>
            <img src="Images/Error.gif" id="errCustName" width="14" height="14" alt="Error icon" style="visibility:hidden; margin-left:5px;">
            <br>

            <label for='dtbSampleDate'>Date:</label>
            <input type="date" name="sampleDate" id="dtbSampleDate">
            <img src="Images/Error.gif" id="errDate" width="14" height="14" alt="Error icon" style="visibility:hidden; margin-left:5px;">
            <br>

            <label for='txtDinnerTab'>Dinner Tab:</label>
            <input type='number' value="0.00" name='dinnerTab' size="20" id='txtDinnerTab'>
            <img src="Images/Error.gif" id="errDinnerTab" width="14" height="14" alt="Error icon" style="visibility:hidden; margin-left:5px;">
            <br>

            <button type="submit" class="buttonStyle" id='btnSubmit' name="btnSubmit">Calculate Tip</button>

            <button type="reset" class="buttonStyle" id="btnReset" name="btnReset">Clear</button>


        </form>
    </div>










</body>

</html>

Second Page: 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="author" content="Sergio Ochoa">
    <meta name="description" content="Main Page, School">
    <meta name="keywords" content="Sergio,ABoutMe">

    <title>Payback,Inc.</title>






    <style type="text/css">
        #header {
            text-align: center;
        }
        
        #main {
            clear: both;
        }
        
        body {
            background-color: wheat;
        }

    </style>



</head>

<body>



    <div id="header">
        <img class="leftPicture" src="Images/Corgi.png" alt="Company logo" width="300" height="152" style="float:left" />


        <img class="rightPicture" src="Images/Corgi.png" alt="Company logo" width="300" height="152" style="float:right" />

        <h1>Payback,Inc. </h1>
        <h2>Dinner Reimbursement form</h2>
    </div>



    <?php extract($_REQUEST); ?>
    <form method="post" action="nextPage.php">
        <input type="hidden" name="sampleDate" value="<?php echo $sampleDate; ?>">
        <!-- put a button here -->
    </form>


    <div id="main">


        <?php
        
        $totalTip = $dinnerTab * .20;
        $totalBill= $totalTip + $dinnerTab;
        
        $refundDate = new DateTime($sampleDate);
			$refundDate->modify("+2 week");
        
        
        
        
      
        
        
        
        
        
        
        
        
        ?>


            <p>Date:
                <?php echo $sampleDate;?>
            </p>


            <p>Restaurant Name:
                <?php echo $_REQUEST['restaurantName'];?>
            </p>


            <p>Dinner Tab: $
                <?php echo $dinnerTab;?>
            </p>


            <p>Tip: $
                <?php echo $totalTip;?>
            </p>

            <p>Total: $
                <?php echo $totalBill;?>
            </p>
            <br>

            <p>Be sure to submit for reimbursement by <strong><?php echo $refundDate->format('Y-m-d');?></strong></p>









    </div>





</body>

</html>

THE JavaScript Files: 

var $ = function (id) {
    return document.getElementById(id);
}

const dinnerTabMin = 0;
const dinnerTabMax = 2000;


window.onload = function () {
    $("txtRestaurantName").required = true;
    $("txtRestaurantName").onblur = validateUserName;

    $("txtDinnerTab").required = true;
    $("txtDinnerTab").onblur = validateDinnerTab;
    $("txtDinnerTab").min = dinnerTabMin;
    $("txtDinnerTab").max = dinnerTabMax;


    $("btnSubmit").onclick = validateForm;


}


function validateUserName() {
    var ptr = $("txtRestaurantName"); //Pointer to input field
    var err = $("errCustName"); //Pointer to field's error marker

    err.style.visibility = "hidden";
    if (ptr.value == "") {
        err.style.visibility = "visible";
        err.title = "Customer Name is required";
    } else {
        ptr.value = ptr.value.toTitleCase();
        return true;
    } //end if

    return err.style.visibility == "hidden";

} //end validateUserName

function validateDinnerTab() {
    var ptr = $("txtDinnerTab"); //Pointer to input field
    var err = $("errDinnerTab"); //Pointer to field's error marker

    err.style.visibility = "visible";
    var unformatted = FormatNumber(ptr.value, "G"); //Remove commas and $
    var value = parseFloat(unformatted);
    if (unformatted == "") {
        err.title = "Dinner Tab is required";
    } else if (value < ptr.min || value > ptr.max) {
        err.title = "Value must be between $" + ptr.min + " and $" + ptr.max + ".";
    } else {
        err.style.visibility = "hidden";
        ptr.value = FormatNumber(value, "F");
    } //end if

    return err.style.visibility == "hidden";

}





function validateForm() {
    if (validateUserName(), validateDinnerTab()) {
        submitButton();
        return true;
    } else {
        alert("Please correct the designated errors before submitting");
        return false;
    }

}

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

you really shouldn't be doing for validation client, why would you out your security on the clients machine?

 

you should be using php to validate your forms.

                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Welcome to hell, let me introduce you to regex. http://www.phpliveregex.com/

Regex will make sure everything is typed in correctly to the reasons you have created. @vorticalbox is right, validations should be done server side not client side.

 

Try to get a bit familiar with this, took me a while when i started but you obviously need it.

Quote or mention me if not feel ignored 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
8 hours ago, vorticalbox said:

you really shouldn't be doing for validation client, why would you out your security on the clients machine?

 

you should be using php to validate your forms.

That's the thing, I am barely getting into PHP and I just need a little push to get me on the right path on the validating with PHP. 

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Solution
5 minutes ago, Sergio45 said:

That's the thing, I am barely getting into PHP and I just need a little push to get me on the right path on the validating with PHP.

JavaScrupt is like HTML, you can edit it and completely change what you want for yourself. It does not affect other but if you ONLY validate stuff with Javascript then somebody will try to edit that and ignore your rules.

 

So what you do is make a PHP validation for this, since it server-side they cant change anything about it. And you use JavaScript to make it User friendly. for example make the box red if it does not follow your rules.

 

Things like password hasing etc is the exact same thing, use a Server-Side language for that. Dont do that stuff with Javascript :)

Quote or mention me if not feel ignored 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

There is like NodeJS and jQuery but other people should talk about that since i have 0 experience with any JavaScript, as far i'm informed NodeJS is a server-side Javascript framework? maybe someone could have some more information about this.

Quote or mention me if not feel ignored 

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×