Allow html tag to be visible only if user input is correct
<p>I want to make a div tag appear only if the user input is acceptable. </p>

<p>This is my index.php file</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;script type="text/javascript" src="../js/jquery.js"&gt;&lt;/script&gt;
&lt;script&gt;
    function validate_group_name(value){
        $.post("validate_group_name.php",{group_name:value},function(data){
            $(".validate_group_name").html(data);
        });
    }
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;input type="text" name="group_name" id="group_name" onkeyup="validate_group_name(this.value)"&gt;
    &lt;span class="validate_group_name"&gt;&lt;/span&gt;

    &lt;div id="display_sometimes" style="display:none;"&gt;
        This text only displays sometimes.
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>This is my validate_group_name.php file</p>

<pre><code>&lt;?php
    mysql_connect("servername ", "username", "password") or die(mysql_error());
    mysql_select_db("database") or die(mysql_error());
    $group_option = $_POST['group_name'];
    $len = strlen($group_option);
    $groups = mysql_query("SELECT name FROM groups");
    $go = 0;
    while($group = mysql_fetch_array($groups)) {        
        if(strtolower($group['name']) == strtolower($group_option)){
            $go++; //check if group already exists
        }       
    }

    if(!preg_match("/^[a-zA-Z0-9 ]*$/", $group_option)){
        echo "&lt;span style='color: red;'&gt;" . "Invalid Group Name." . "&lt;/span&gt;";
    } else if($len &lt; 3){
        echo "&lt;span style='color: red;'&gt;" . "Your group name must be greater than 2 characters." . "&lt;/span&gt;";
    } else if($go != 0){
        echo "&lt;span style='color: red;'&gt;" . "That group name already exists." . "&lt;/span&gt;";
    } else {
        echo "&lt;span style='color: green;'&gt;" . "That group name is available." . "&lt;/span&gt;";
    }
?&gt;
</code></pre>

<p>Is it possible to create a javascript function that detects the text outputted from the id "validate_group_name". </p>

<p>I have been able to use this function to make the div tag visible, but it doesn't check whether the group name is available, and also doesn't detect change while typing. </p>

<pre><code>$(document).ready(
    function(){
        $('#group_name').change(
            function(){
                if ($(this).val()) {
                    $('#display_sometimes').css('display','block');
                    $('#display_sometimes').css('width','100%');
                    $('#display_sometimes').css('height','200px');
                } 
            }
            );
    });
</code></pre>

<p>Thanks for any help.</p>