Ajax to form field to check invalid characters?

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?
jtcyAsked:
Who is Participating?
 
Russell2566Commented:
No nead for Ajax here.. Just create a JavaScript function that onChange fires. Use Regex (http://regexlib.com 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..

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

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

<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.
0
 
siva_sivaCommented:
Use the following code to check invalid characters. It allows only the upper case and lower case characters and numbers.

ajaxsymbol.php
############
<?php
      // 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>";
            }
            exit;
      }
?>
<html>
<title>Validate</title>
<head>
      <!-- Ajax common script it is used in realnigerian copy from that -->
      <script src="scripts/prototype.js" type="text/javascript"></script>
<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='+document.validform.name.value;
            new Ajax.Updater(target,url,{ parameters:params });
      }
</script>
<form name="validform" action="ajaxsymbol.php" method="post">
      <table>
            <tr>
                  <td id="textname"><input name="name" type="text" id="name" value="<?php echo($_POST['name']); ?>" onchange="check_valid();"></td>
            </tr>
      </table>
</form>
0
 
jtcyAuthor Commented:
Where can I get this:

<script src="scripts/prototype.js" type="text/javascript"></script>
0
 
siva_sivaCommented:
You can download this from following url,
http://www.prototypejs.org/assets/2007/5/1/prototype.js
0
 
siva_sivaCommented:
it's working or not? You need any other clarification?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.