Displaying error messages using php?

Question

I have an HTML file which contains registration form(inputs,labels, buttons and etc.). I have a special div:

<div id ="errorArea"></div>

- which is reserved empty space I want to use to display error messages (login is already used, passwords do not match, email couldn't be empty and etc.). There is submit button which triggers php. In current state everything works fine, as I'm using this to display messages:

if (!empty($myrow['id'])) {
    exit ("this login is already used");
 }

After submit button is pressed, if there is an error new white blank shows us pre-defined text. What I'm trying to achieve is: show error messages inside of errorArea div, without leaving current page. Can you help as I cannot find out myself the best way to do that. Keep in mind that I have very little knowledge in php language.

Update Maybe there is a way to refresh page with new parameters or is it legit to load another one which is exact same page with exception of adding new text?
Update2 Can anyone explain me if it possible, to trigger a javascript before posting data a.k.a triggering php script?

Answer 1

"without leaving current page" - very bad idea.

Firstly, whet is your form action? It should normally lead to a validation script, which user does not see, and that in turn can lead to successful login page, or, as you seem to want, to rebuild the first log in" page, with an error message.

This is all very standard. Just google for something like PHP login form validation tutorial (or example).

Don't worry, PHP is eacy to learn (but get a good IDE, like NetBeans).

Good luck!

---

[Update] I just googlged for php login example and there are some good hits. For instance, the first one http://www.9lessons.info/2009/09/php-login-page-example.html but why look at a few from the first page of hits?

IMPORTANT: a lot of people here are telling you that MUST use client-side code. That is 100% NOT the case.

Yes, client-siders, I can, and do, code client side (I started with plain JS, moved on to JQuery & am now coding AndularJs). I know why client-side, Ajax or otherwise, is A Good Thing, but it sounds like OP is just beginning, so why not let him master server-side first? Then, when he has mastered that , he can look at client-side (I am just afraid that someone here will try to talk him into using NodeJs on the server side. Again, not totally wrong, but for a beginner, it's best to start with PHP)

This can be done entirely on the server side. Parts of login MUST be done on the server side (where are you going to validate the password?).

OP, some form input can be validated at client side (is that a valid date, zip code, etc Is a mandatory field blank?)

You can (I can even say "should") do that client side to avoid a round trip to the server.

But, you can also just chuck all user input at the server and let it sort it out. I strongly recommend this - for a leaner.

I advise you, as a leaner, to:

• become reasonably proficient in server side before getting into client side (but do lean both in the medium term)
• get a good IDE, such as NetBeans, and learn how to use the debugger
• look at other people's code. Google for tutorial or example for whatever you seek to do. It wouldn't hurt to buy a book to learn from.

Client-siders - a plea - let's not start a flame war. I know why you are advocating what you are advocating, but it is not 100% necessary - in this case - it can all be done server side and I am just trying to help the OP learn, rather than decide that it is all too complicated & give up & walk away.

Answer 2

What you want is client side validation which is usually achieved using JavaScript. I would recommend using the jQuery library as it abstracts a lot of the ugliness of ensuring browser compatibility. The below pseudo-code is starting point if you want to validate when user hits submit.

$('#myForm').submit(function(e) {
    // do error checking here

    If (error) {
         // spend error message to div
         return false; // prevents standard form submission event
    }
 });

Another option is to validate each input field as the user finishes entering the field. Below pseudo-code outlines:

$(document).on('change', '.my-form-fields', function () {
    // check if valid and post message if needed
});

Answer 3

Maybe my code will help you)

Html with jQuery:

(function($){

"use strict";

$('document').ready(function(){
    $( ".submit-button" ).on('click', function(){

    var ajaxData = {
        action: 'getsettings',
        string: $('.name').val()
    };

    $.ajax({
        type: 'POST',
        url: 'resp.php',
        data: ajaxData }).done(function(msg){
            console.log(msg);
        });
    });
});

})(jQuery);


<input type="text" class="name">
<button class="submit-button">Button</button>   

And file resp.php with php script:

if ( 'POST' === $_SERVER['REQUEST_METHOD'] && 
     isset( $_SERVER['HTTP_X_REQUESTED_WITH'] ) && 
     'XMLHttpRequest' === $_SERVER['HTTP_X_REQUESTED_WITH'] ) {

    if (    'getsettings' === $_POST['action'] &&
        isset($_POST['action']) && 
        !empty( $_POST['action'] ) ) {

     echo $_POST['string'];
     /*.... Your code ....*/

    }

}

It's work fine!

Answer 4

What you need is Javascript since PHP is server side and you cannot change the text with only PHP and without leaving / refreshing / redirecting, here is an example on how to validate an email address and add text to the div

It is taken from http://www.w3schools.com/js/js_form_validation.asp and modified to your case

<!DOCTYPE html>
<html>
<head>
<script>
function validateForm()
{
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
  {
  document.getElementById('errorArea').innerHTML = "Invalid Email";
  return false;
  }
}
</script>
</head>

<body>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
<div id ="errorArea"></div>
</form>
</body>

</html>