2016-06-23 35 views
0

只有当用户输入可接受时,才想使div标记显示。只有当用户输入正确时,才允许html标记可见

这是我的index.php文件

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

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

这是我validate_group_name.php文件

<?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 "<span style='color: red;'>" . "Invalid Group Name." . "</span>"; 
    } else if($len < 3){ 
     echo "<span style='color: red;'>" . "Your group name must be greater than 2 characters." . "</span>"; 
    } else if($go != 0){ 
     echo "<span style='color: red;'>" . "That group name already exists." . "</span>"; 
    } else { 
     echo "<span style='color: green;'>" . "That group name is available." . "</span>"; 
    } 
?> 

是否有可能创建一个检测从ID输出的文本的JavaScript函数“validate_group_name ”。

我已经能够使用此功能使div标记可见,但它不检查组名是否可用,也不检测输入时的更改。

$(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'); 
       } 
      } 
      ); 
    }); 

感谢您的任何帮助。

+0

你为什么不把这种逻辑在回调你'$ .post'?另外,你可以使用'.hide()'和'.show()'来做到这一点。 – 4castle

+0

感谢您的咨询!我做了这个改变,现在看起来更干净了。 – John

回答

0

你可以在你的AJAX(.post())方法的成功回调函数:

function validate_group_name(value){ 
    $.post("validate_group_name.php",{group_name:value},function(data){ 
     $(".validate_group_name").html(data); 
     if (data=="Bob Smith"){ 
      $('#display_sometimes').show().css({'width':'100%', 'height':'200px'}); 
     } 
    }); 
} 
+0

删除我的标记后,此工作完善。谢谢!你知道在样式化文本时我还能如何工作吗? – John

相关问题