отображение сообщений об ошибках в речевых пузырях с помощью jquery / css3

Question

отображение сообщений об ошибках в речевых пузырях с помощью jquery / css3

0

эй, сейчас я использую эти скрипты для проверки ввода в поле имени пользователя:

// username-check
$(document).ready(function(){
    $("#username-field").keyup(function(event) {
        $.post("checkUsername.php", {
            username: $(this).val()
        }, 
        function(data) {
            $("#name-error").text(data.error ? data.error : "");
        }, "json");
    });
});

этот jQuery отправляет типизированные данные в другой php-скрипт: вот он, chechUsername.php:

include "storescripts/connect_to_mysql.php";

require 'classes/UsernameChecker.php';

$config = array('DB' => $mysqli,
                'Table' => 'table',
                'Row' => 'row',
                'Output' => true,
                'Format' => 'JSON');

$usernameChecker = new UsernameChecker($config);

if(!empty($_POST['username'])) {
    if ($usernameChecker->check_regex($_POST['username'])) {    
        if($usernameChecker->check_length($_POST['username'])) {
            if (!$usernameChecker->check($_POST['username'])) {
                echo json_encode(array("error" => "Username already taken"));
            } else {
                echo json_encode(array("error" => "Username available"));
            }
        } else {
            echo json_encode(array("error" => "Username too long"));
        }
    } else {
        echo json_encode(array("error" => "Allowed symbols: a-z , A-Z , 1-9 and \"_\""));
    }
} else { 
    echo json_encode(array("error" => "Type username"));
}

в зависимости от ввода, я создал некоторые сообщения об ошибках. эти сообщения об ошибках отображаются в:

<span class="error" id="name-error"></span>

теперь я хочу, чтобы dpiday сообщения об ошибках в речевых пузырях, кто-нибудь получил хорошее решение или хороший учебник или jsfiddle для решения моей проблемы? Привет!

user2999787 05 дек. 2013, в 10:51

Источник

Теги:

php

jquery

css3

1 ответ

Ещё вопросы

Nisha · Answer 1 · 2013-12-05T07-54-00.000Z

Вы можете использовать div для всплывающего окна.

$(document).ready(function() {

// Here we will write a function when link click under class popup                 
$('a.popup').click(function() {


// Here we will describe a variable popupid which gets the
// rel attribute from the clicked link                          
var popupid = $(this).attr('rel');


// Now we need to popup the marked which belongs to the rel attribute
// Suppose the rel attribute of click link is popuprel then here in below code
// #popuprel will fadein
$('#' + popupid).fadeIn();


// append div with id fade into the bottom of body tag
// and we allready styled it in our step 2 : CSS
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();

// Now here we need to have our popup box in center of 
// webpage when its fadein. so we add 10px to height and width 
var popuptopmargin = ($('#' + popupid).height() + 10) / 2;
var popupleftmargin = ($('#' + popupid).width() + 10) / 2;


// Then using .css function style our popup box for center allignment
$('#' + popupid).css({
'margin-top' : 0,
'margin-left' : -popupleftmargin
});
return false;
});


// Now define one more function which is used to fadeout the 
// fade layer and popup window as soon as we click on fade layer
$('#fade').click(function() {


// Add markup ids of all custom popup box here                        
$('#fade , #popuprel , .close, .popupbox').fadeOut()
return false;
});

$('.close').click(function() {


// Add markup ids of all custom popup box here                        
$('#fade , #popuprel , .close, .popupbox').fadeOut()
return false;
});
});

Я выгляжу великолепно, но речевой пузырь должен быть активирован синхронно с этим: $ ("# username-field"). keyup (function (event) {где я могу это реализовать? не могли бы вы добавить jsfiddle, может быть?
как сделать это синхронно с key.up-событием?
Вместо $ ('a.popup'). Click (function () {}) вам нужно добавить код в $ ("# username-field"). Keyup (function (event) {}). Надеюсь, это поможет.