PHP Using both client side and server side validation WITHOUT using 3rd party code

Question

EDIT: thanks for all the help. Received an email saying that we didn't need the client side so I scrapped that idea in favor of actually completing the assignment on time.

Before you ask, Yes this is assignment work. No I am not looking for someones complete code. I am a beginner will practically no experience in HTML/PHP/javascript, but this is the second part of the assignment so I already have some of my own code from the first part, which was so very easy in comparison to this part. The task doesn't specifically say we have to use client side validation, but I feel it would be good practice.

I need someone to clearly show me how to use both client and server side validation. I already have the javascript validation, but I can modify it as it displays an alert box for every error. I CANNOT use 3rd party code like jQuery which apparently everyone on the internet likes to use, and the course I am doing doesn't like to actually teach us any useful content so we are all on our own.

The data from the form will then be entered into a database through MySQL (which I am not looking forward to doing), and from viewing the minimal information from w3schools on the topic, I understand that I have to POST the form to itself.

The form itself is pretty simple: contains name, DoB, email, postcode etc. My current .js uses alpha only, num only, date format, email format, radio button and check box checks and every field is tested to make sure it isn't empty.

I suppose what I am after is a complete tutorial on how to do this. My internet searches have been unfruitful, but at least I still have a week till this is due.

Any help is appreciated, but simple and clear help would be even more so. I will continue to prowl the internet for help until then and post back here if I find useful stuff for anyone else with the same problem (which I'm sure is 90% of my class.....)

Thanks in advance.

Answer 1

Read the code below. Hope inline comments answer your question.

add_record.php

<?php
if(isset($_POST['name'])) {

  //get post data
  $name = trim($_POST['person_name']);
  $email = trim($_POST['email']);
  $message = trim($_POST['message']);

  //This is server-side check!
  if (strlen($name) > 10){
    echo "FAILED! You tried to submit a name which is greater than 10 chars."
  }else{
    //insert to the database here..

    //and send out a "success message or render HTML
    echo "SUCCESS!";
  }
}else {
    echo "Error! Proper parameters were not provided!";
}

a.html

<html>
<head>
<script type="text/javascript">
function checkForm(){
    //client side (JS) validation. This happens before submitting.
    var name = document.forms[0].person_name.value;
    if (name.length > 10){
        alert("Name is too long");
        return false;
    }
    //do some more checks here..
    //return true if all checks have passed, false otherwise.

    //the return value of this function is checked before submit. The form is submitted only when this function returns a true.
    return true;
}
</script>
</head>
<body>
<form action="add_record.php" method="POST" onsubmit="return checkForm()">
Name: <input type="text" name="person_name"/>
Email: <input type="text" name="email"/>
Message: <input type="text" name="message"/>
<input type="submit"/>
</form>
</body>
</html>

EDIT : As mplungjan pointed out, it is not a good idea to have a field named "name" inside forms. The form object itself might have a "name" which might conflict.

Answer 2

Since it's homework, I should at least point you to a few resources:

Client side

For validation:

http://www.9lessons.info/2009/03/perfect-javascript-form-validation.html (form validator)
http://www.javascriptkit.com/javatutors/re.shtml (regular expression guide)

Don't jump to AJAX straight away, that's advanced material. Get the basics done first and just let the form submit to PHP (ie page refreshes and PHP redraws the form if there were any validation issues).

Server side

For validation: http://www.php.net/filter - examples

For database work: http://www.php.net/pdo - tutorial

Answer 3

For server side validation, you would send the form data to a php page using method="post", then check for correct format. Something like:

<form action="validate.php" method="post">
<!-- form fields -->
</form>

In validate.php, you use $_POST["var_name"], where var_name is the name of your input fields, to check the data. So, for example, something like:

$age = $_POST["age"];
if (ctype_digit($age) && $age > 0) {
    // correct format
}

It seems like you already have client side validation figured out. I'm not quite sure if I understood your problem correctly, though - Let me know where specifically you are having problems and I'll try to help.

PHP Using both client side and server side validation WITHOUT using 3rd party code

Question

3 answers

solution1
4 2012-05-23 09:14:35

solution2
1 2012-05-23 08:57:06

solution3
0 2012-05-23 08:55:52

PHP Using both client side and server side validation WITHOUT using 3rd party code

Question

3 answers

solution1 4 2012-05-23 09:14:35

solution2 1 2012-05-23 08:57:06

solution3 0 2012-05-23 08:55:52

solution1
4 2012-05-23 09:14:35

solution2
1 2012-05-23 08:57:06

solution3
0 2012-05-23 08:55:52