Question

I would like to be able to check the text in a text-box after it has changed, and report what is wrong.
It is for a registration form.

This is a part of register.php where

<form action"" method="post">
<ul class="ul-reg">
<li>
<p>Username: </p><input name="username-field" type="text" onblur="someFunction()" /><span id="UsernamehelpText">      </span>
</li>
</ul>
</form>

Then I would have a registerfunctions.php where i would store all the functions for checking lenght,char,maybe regex etc.. Its not really that important what functions i call. I just don’t know how to call them.

Form what i have seen the span is where u post the errors, but if there is any other option im open for it, all i want is to be able to post the erorr text in the same line as the text-box

I have checked JavaScript and AJAX, but I am pretty new in this and don’t really understand how it works.

Answer 1

After discussion in comments I understand what you want.

First, an explanation. There are two places where validation occurs: In your frontend (your web page) and in your backend (in the PHP script that saves the posted values). Anything that you really don’t want to save – for example unescaped SQL strings, too-long fields, and so on – has to be validated in PHP, because it is trivial to get around Javascript validation. For example, nothing is stopping someone from sending a POST to your server containing illegal values without even bothering to visit your webpage.

Even though you need to perform validation in the back-end, it’s still user friendly to do the same validation in the front end, so the user doesn’t have to wait as long to see an error. This also reduces traffic to your server. Something you probably want to do in a big project is to have some kind of system for writing validation rules centrally, and then using those rules to dynamically generate both PHP and Javascript validation. The advantage of doing that is that you don’t duplicate your business rules in two places, but in a smaller project it’s probably not worth the hassle.

Validation in the frontend looks about like this: You bind an event handler to an appropriate event or events (you can add onkeydown=”validateUserName()” for example, so that the validation reacts a bit quicker), and update your warning text appropriately.

<form action="" method="post">
  <ul class="ul-reg">
    <li>
      <p>Username: </p>
      <input id="username" name="username-field" type="text" onblur="validateUserName()" />
      <span id="UsernamehelpText"></span>
    </li>
  </ul>
</form>

<script type="text/javascript">
  function validateUserName() {
    var userNameElement = document.getElementById('username');

    //Do your work: Get the value of the user name field, check
    // the values against your validation rules...

    var helpText = document.getElementById('UsernamehelpText');
    if(isValid)
      helpText.innerHTML = "";
    else
      helpText.innerHTML = "Invalid!";
  }
</script>

In the backend, when you process the form, you then have to check the same rules in PHP to prevent illegal values from being posted either maliciously or due to an error in your Javascript. If an error is found, you don’t save, instead you can just re-render the form with the submitted values in the input fields and a message indicating what was invalid – this allows the user to change their inputs without losing the values they submitted.