Ajax to form field to check invalid characters?

Posted on 2007-10-05
Last Modified: 2008-09-27
I have this field:

<input name="name" type="text" id="name" value="<?php echo($_POST['name']); ?>">

How to do an Ajax script that checks the username doesn't contain invalid chacters and symbol or spaces and display the red warning beside it?
Question by:jtcy
    LVL 4

    Accepted Solution

    No nead for Ajax here.. Just create a JavaScript function that onChange fires. Use Regex ( for more help) to fail or pass.

    Just add an empty div next to each input and if it fails add the warning image beside it..

          function validate(field) {
                var passed = 'REGEX CODE/EXPRESSION HERE'
                var warningObj = document.getElementById( + "_warning");

                if (!passed)
                      warningObj .innerHTML = "<img src='warning.gif'>";
                      warningObj .innerHTML = "";

    <input type="text" name="userName" onChange="validate()"><span id="userName_warning"></span>

    Alternativly you could also just create the warning image next to each item and default with CSS the the display value to "none". Then just set that to block or none depeding on the results.
    LVL 5

    Assisted Solution

    Use the following code to check invalid characters. It allows only the upper case and lower case characters and numbers.

          // After enter the value in the textbox called through Ajax
          if(isset($_REQUEST['value'])) {
                $value = $_REQUEST['value'];
                if (preg_match("/^[a-zA-Z0-9]{1,}$/", "$value")) {
                      echo "<input name='name' type='text' id='name' value='$value' onchange='check_valid();'>";
                      echo "<br>Valid Characters";
                else {
                      echo "<input name='name' type='text' id='name' value='$value' onchange='check_valid();'>";
                      echo "<br><font color=red>Invalid Characters</font>";
          <!-- Ajax common script it is used in realnigerian copy from that -->
          <script src="scripts/prototype.js" type="text/javascript"></script>
          function check_valid() {
                // In which the textbox is display ("id value for the td textbox")
                var target = 'textname';
                var url = 'ajaxsymbol.php';
                var params = 'value=';
                new Ajax.Updater(target,url,{ parameters:params });
    <form name="validform" action="ajaxsymbol.php" method="post">
                      <td id="textname"><input name="name" type="text" id="name" value="<?php echo($_POST['name']); ?>" onchange="check_valid();"></td>

    Author Comment

    Where can I get this:

    <script src="scripts/prototype.js" type="text/javascript"></script>
    LVL 5

    Expert Comment

    You can download this from following url,
    LVL 5

    Expert Comment

    it's working or not? You need any other clarification?

    Featured Post

    Live: Real-Time Solutions, Start Here

    Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

    Join & Write a Comment

    Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
    JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
    In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
    The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

    755 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now