Новые уроки
Получай новые уроки по RSS

Подписка на рассылку


Голосование
Чего выкладывать больше?
Программ
Уроков
Скриптов
Шаблонов
Макетов
CMS
Видеоуроков
Облако тегов

Jquery, PHP → Проверка формы с помощью PHP, JQuery и CSS3

Проверка формы с помощью PHP, JQuery и CSS3


Демо: смотреть
Скачать: demo.zip [6,86 Kb] (cкачиваний: 276)


Сегодня мы делаем стиль формы, с использованием прогрессивного улучшения. Это означает, что вы сначала убедитесь, что форма хорошо работает без javascript и CSS фантазии поддержке (думаю, в IE6 ), а затем добавим крассоты и эффектов с помощью AJAX и JQuery магии.

Форма имеет собственные пользовательские подсказки проверки, и совершенно пригодна для работы с отключенным javascript. Форма будет работать и без java script, так как проверка на заполнение полей еще будет с помощью php.

Шаг 1 - XHTML

Первый шаг включает в себя создание основы XHTML формы. Она должна быть простой.

demo.html
<div id="carbonForm">
    <h1>Signup</h1>

    <form action="submit.php" method="post" id="signupForm">

        <div class="fieldContainer">
            <div class="formRow"></div>
            <!-- Two more formRow divs -->
        </div>

        <div class="signupButton">
            <input type="submit" name="submit" id="submit" value="Signup" />
        </div>

    </form>
</div>


Внутри у нас есть заголовки и поля формы

demo.html
<div class="formRow">
    <div class="label">
        <label for="name">Name:</label>
    </div>

    <div class="field">
        <input type="text" name="name" id="name" />
    </div>
</div>

Подсказки будут выскакивать в соответствии с id поля.
Проверка формы с помощью PHP, JQuery и CSS3


Шаг 2 - CSS
Форма в значительной мере опирается на CSS для достижения эффекта углеродного волокна. CSS3 правила используются также, который успешно имитируют эффекты,которые ранее возможно было сделать только в графических редакторах, как Photoshop. Только самые интересные стили приведены здесь, все остальные вы можете увидеть в styles.css в скачаном архиве.

styles.css
#carbonForm{
    /* The main form container */
    background-color:#1C1C1C;
    border:1px solid #080808;
    margin:20px auto;
    padding:20px;
    width:500px;

    -moz-box-shadow:0 0 1px #444 inset;
    -webkit-box-shadow:0 0 1px #444 inset;
    box-shadow:0 0 1px #444 inset;
}

.fieldContainer{
    /* The light rounded section, which contans the fields */
    background-color:#1E1E1E;
    border:1px solid #0E0E0E;
    padding:30px 10px;

    /* CSS3 box shadow, used as an inner glow */
    -moz-box-shadow:0 0 20px #292929 inset;
    -webkit-box-shadow:0 0 20px #292929 inset;
    box-shadow:0 0 20px #292929 inset;
}

#carbonForm,.fieldContainer,.errorTip{
    /* Rounding the divs at once */
    -moz-border-radius:12px;
    -webkit-border-radius:12px;
    border-radius:12px;
}

.formRow{
    height:35px;
    padding:10px;
    position:relative;
}

.label{
    float:left;
    padding:0 20px 0 0;
    text-align:right;
    width:70px;
}

label{
    font-family:Century Gothic,Myriad Pro,Arial,Helvetica,sans-serif;
    font-size:11px;
    letter-spacing:1px;
    line-height:35px; /* Neat line height trick */
}

.field{
    float:left;
}

.field input{
    /* The text boxes */
    border:1px solid white;
    color:#666666;
    font-family:Arial,Helvetica,sans-serif;
    font-size:22px;
    padding:4px 5px;
    background:url("img/box_bg.png") repeat-x scroll left top #FFFFFF;
    outline:none;
}

#submit{
    /* The submit button */
    border:1px solid #f4f4f4;
    cursor:pointer;
    height:40px;
    text-indent:-9999px;
    text-transform:uppercase;
    width:110px;

    background:url("img/submit.png") no-repeat center center #d0ecfd;

    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
}

#submit.active{
    /* Marking the submit button as active adds the preloader gif as background */
    background-image:url("img/preloader.gif");
}

input:hover,
input:focus{
    /* CSS3 glow effect */
    -moz-box-shadow:0 0 8px lightblue;
    -webkit-box-shadow:0 0 8px lightblue;
    box-shadow:0 0 8px lightblue;
}


Проверка формы с помощью PHP, JQuery и CSS3


Шаг 3 - JQuery
После включения библиотеки JQuery на странице, мы можем перейти к написанию кода Java Script, который вдохнет жизнь в форму нашей страници.
$(document).ready(function(){
    // $(document).ready() is executed after the page DOM id loaded

    // Binding an listener to the submit event on the form:
    $('#signupForm').submit(function(e){

        // If a previous submit is in progress:
        if($('#submit').hasClass('active')) return false;

        // Adding the active class to the button. Will show the preloader gif:
        $('#submit').addClass('active');

        // Removing the current error tooltips
        $('.errorTip').remove();

        // Issuing a POST ajax request to submit.php (the action attribute of the form):
        $.post($('#signupForm').attr('action'),
            $('#signupForm').serialize()+'&fromAjax=1',function(response){

            if(!response.status)
            {
                // Some kind of input error occured

                // Looping through all the input text boxes,
                // and checking whether they produced an error
                $('input[type!=submit]').each(function(){
                    var elem = $(this);
                    var id = elem.attr('id');

                    if(response[id])
                        showTooltip(elem,response[id]);
                });
            }
            else location.replace(response.redirectURL);

            $('#submit').removeClass('active');
        },'json');

        e.preventDefault();
    });

    $(window).resize();
});

// Centering the form vertically on every window resize:
$(window).resize(function(){
    var cf = $('#carbonForm');

    $('#carbonForm').css('margin-top',($(window).height()-cf.outerHeight())/2)
});

// Helper function that creates an error tooltip:
function showTooltip(elem,txt)
{
    // elem is the text box, txt is the error text
    $('<div class="errorTip">').html(txt).appendTo(elem.closest('.formRow'));
}


Настройка сообщений:
{
    "status"    : 0,    // Indicates that the response is an error
    "email"        : "Please fill in a valid email!",        // Error message
    "pass"        : "Please fill in a valid password!"    // Error message
}


Проверка формы с помощью PHP, JQuery и CSS3


Шаг 4 - PHP
Хорошая вещь в этой формы является то, что она может использоваться даже если javascript отключен. Это работает, потому что действие атрибута элемента формы, также имеет значение submit.php. То есть наша форма еще проверяется на заполнение в php.

submit.php
// Error reporting:
error_reporting(E_ALL^E_NOTICE);

// This is the URL your users are redirected,
// when registered succesfully:

$redirectURL = 'http://demo.tutorialzine.com/2010/04/carbon-signup-form/demo.html';

$errors = array();

// Checking the input data and adding potential errors to the $errors array:

if(!$_POST['name'] || strlen($_POST['name'])<3 || strlen($_POST['name'])>50)
{
    $errors['name']='Please fill in a valid name!<br />Must be between 3 and 50 characters.';
}

if(!$_POST['email'] || !preg_match("/^[\.A-z0-9_\-\+]+[@][A-z0-9_\-]+([.][A-z0-9_\-]+)+[A-z]{1,4}$/", $_POST['email']))
{
    $errors['email']='Please fill in a valid email!';
}

if(!$_POST['pass'] || strlen($_POST['pass'])<5)
{
    $errors['pass']='Please fill in a valid password!<br />Must be at least 5 characters long.';
}

// Checking whether the request was sent via AJAX
// (we manually send the fromAjax var with the AJAX request):

if($_POST['fromAjax'])
{
    if(count($errors))
    {
        $errString = array();
        foreach($errors as $k=>$v)
        {
            // The name of the field that caused the error, and the
            // error text are grouped as key/value pair for the JSON response:
            $errString[]='"'.$k.'":"'.$v.'"';
        }

        // JSON error response:
        die    ('{"status":0,'.join(',',$errString).'}');
    }

    // JSON success response. Returns the redirect URL:
    echo '{"status":1,"redirectURL":"'.$redirectURL.'"}';

    exit;
}

// If the request was not sent via AJAX (probably javascript
// has been disabled in the visitors' browser):

if(count($errors))
{
    echo '<h2>'.join('<br /><br />',$errors).'</h2>';
    exit;
}

// Directly redirecting the visitor if JS is disabled:

header("Location: ".$redirectURL);


Наша форма с проверкой готова!

Демо: смотреть
Скачать: demo.zip [6,86 Kb] (cкачиваний: 276)
Опубликовал dimas_ua, 16-04-2011, 00:00 Комментариев: 1
 (голосов: 6)
Пишет Артём, 21 июля 2011 12:04
  • Сообщений: 0
  • Новостей: 0
Спасибо, полезная информация. :)