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

php javascript validation

16,576

Solution 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.

Solution 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 (i.e. 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

16,576

Author by

kathleenie.xx

Updated on June 27, 2022

Comments

kathleenie.xx almost 2 years

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.
kathleenie.xx almost 12 years

Okay, well while that confuses the hell out of me, it actually seems pretty simple to implement both. Thanks for that. I'll give it a try when I'm done with the more pressing assignments.
UltraInstinct almost 12 years

In that case try having PHP section in a separate file. Or wait I will update my post.
mplungjan almost 12 years

@Thrustmaster - please a) pass the form using return checkForm(this) and b) please do not use name as a field name since a form may also have a name.
mplungjan almost 12 years

Is filter part of the standard PHP package? On PHP.net it tells me to install it
UltraInstinct almost 12 years

Yes, about the 'name' part, I agree. But why must I pass a reference of the form when I know its the only form in the HTML?
Ja͢ck almost 12 years

@mplungjan It's typically enabled on PHP builds
mplungjan almost 12 years

Because then it will always work, even when you decide to add a search form to the top of the page - and it will make the script less cluttered. formObj.firstName is nicer than document.forms[0].firstName
kathleenie.xx almost 12 years

It's more that I don't really understand how they fit together. I'm sure that I can get both working independently but I don't understand how to use them in conjunction.
r.hamd over 8 years

i like this answer :-)