ФорумПрограммированиеJavaScript → Проверка формы на заполнение

Проверка формы на заполнение

  • md5

    Сообщения: 11957 Репутация: N Группа: в ухо

    Spritz 27 января 2011 г. 0:23, спустя 3 минуты 39 секунд

    а нахуя? ))
    все умрут, а я изумруд
  • fgets

    Сообщения: 1099 Репутация: N Группа: Кто попало

    Spritz 27 января 2011 г. 0:44, спустя 20 минут 53 секунды

    разделил всё по полочкам + теперь валидно

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="X-UA-Compatible" content="IE=9">
    <title>html5 test</title>
    <link rel="stylesheet" href="html5compatible.css" type="text/css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="html5compatible.js"></script>
    </head>
    <body>
       <form method="post">
           <input type="text" name="test1" value="" required pattern="[0-9]+" />
           <input type="text" name="test2" value="" required />
    <input type="text" name="test3" value="" pattern="[a-z]+" />
           <input type="text" name="test4" value="" />
    <input type="email" name="email" />
           <input type="submit" />
    <div id="error"></div>
       </form>
    </body>
    </html>


    html5compatible.js:
    $(function () {
    var nAgt = navigator.userAgent;
    if (!((verOffset=nAgt.indexOf("Opera"))!=-1||(verOffset=nAgt.indexOf("Chrome"))!=-1||(verOffset=nAgt.indexOf("Safari"))!=-1)) {
    $('input[type=email]').each(function() {
    if ($(this).attr('pattern') === undefined) {
    $(this).attr('pattern', '([a-z,0-9,_,\-,\.])+\@([a-z,0-9,_,\-])+(\.([a-z,0-9])+)+');
    }
    })

    $('form').submit(function () {
           var checked = true;
           $(this).find('input').each(function() {
               if ($(this).attr('required') !== undefined)
               {
                   if ($(this).val() === '') {
                       $(this).focus();
                       error('Необходимое поле не заполнено!');
                       checked = false;
                       return checked;
                   }
               }
               
               if ($(this).attr('pattern') !== undefined)
               {
                   var preg = new RegExp('^'+$(this).attr('pattern')+'$', 'ig');
    if ($(this).attr('required') === undefined && $(this).val() == '') {
    return true;
    }
                   else if (!(preg.test($(this).val()))) {
                       $(this).focus();
                       error('Неверный формат!');
                       checked = false;
                       return checked;
                   }
               }
           })
    if (!checked) return false;
       })

    function csschecked (element) {
    /** реализуем кроссплатформенные css3 подсказки */
    var checked = true;

    if (element.attr('required') === undefined && element.attr('pattern') === undefined && element.attr('type') !== 'text')
    {
    return true;
    }

    if (element.attr('required') !== undefined) {
    if (element.val() === '') {
    checked = false;
    }
    }
               
           if (element.attr('pattern') !== undefined) {
    var preg = new RegExp('^'+element.attr('pattern')+'$', 'ig');
    if (element.attr('required') === undefined && element.val() == '') {
    checked = true;
    }
    else if (!(preg.test(element.val()))) {
    checked = false;
    }
    }

    if (element.attr('required') === undefined && element.attr('pattern') === undefined)
    {
    checked = true;
    }

    if (!checked)
    {
    element.removeClass('invalid valid').addClass('invalid');
    }
    else
    {
    element.removeClass('invalid valid').addClass('valid');
    }
    }

    function error (message) {
    $('#error').html(message);
    }

    $('input').keyup(function (){csschecked($(this))})
    .focus(function (){csschecked($(this))})
    .focusout(function (){$(this).removeClass('invalid valid')});
    }});


    html5compatible.css:
    input[type=text]:focus:valid,
    input[type=email]:focus:valid,
    input[type=number]:focus:in-range
    {
       outline: #0f0 solid 1px;
    }

    .valid
    {
    outline: #0f0 solid 1px;
    }

    input[type=text]:focus:invalid,
    input[type=email]:focus:invalid,
    input[type=number]:focus:out-of-range
    {
       outline: #f00 solid 1px;
    }

    .invalid
    {
    outline: #f00 solid 1px;
    }
  • fgets

    Сообщения: 1099 Репутация: N Группа: Кто попало

    Spritz 27 января 2011 г. 1:01, спустя 16 минут 28 секунд

    по поводу IE9 - ничего подобного не нагуглил, по ходу я первооткрыватель бага outline в IE9
  • NRG

    Сообщения: 4761 Репутация: N Группа: в ухо

    Spritz 27 января 2011 г. 1:41, спустя 40 минут 14 секунд

    блог им. fgets
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 27 января 2011 г. 1:43, спустя 2 минуты 30 секунд

    $(this).attr('pattern', '([a-z,0-9,_,\-,\.])+\@([a-z,0-9,_,\-])+(\.([a-z,0-9])+)+');

    в квадратных скобках при перечислении не ставятся запятые и необязательно все экранировать…
    [a-z,0-9,_,\-,\.] => [a-z0-9_.-]
    Высокоуровневое абстрактное говно
  • fgets

    Сообщения: 1099 Репутация: N Группа: Кто попало

    Spritz 27 января 2011 г. 1:59, спустя 15 минут 21 секунду


    $(this).attr('pattern', '([a-z,0-9,_,\-,\.])+\@([a-z,0-9,_,\-])+(\.([a-z,0-9])+)+');

    в квадратных скобках при перечислении не ставятся запятые и необязательно все экранировать…
    [a-z,0-9,_,\-,\.] => [a-z0-9_.-]


    я этот паттерн скопировал и не особо в нем разбирался) главное что он работает

    алсо, сделал в качестве плагина к jquery

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="X-UA-Compatible" content="IE=9">
    <title>html5 test</title>
    <link rel="stylesheet" href="h5c.css" type="text/css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="h5c-min.js"></script>
    <script type="text/javascript">
    $.error = function (eid) {
    var message = ['Необходимое поле не заполнено!', 'Неверный формат!'];
    $('#error').html(message[eid]);
    }
    </script>
    </head>
    <body>
    <form method="post">
    <input type="text" name="test1" value="" required pattern="[0-9]+" />
    <input type="text" name="test2" value="" required />
    <input type="text" name="test4" value="" />
    <input type="email" name="email" />
    <input type="submit" />
    <div id="error"></div>
    </form>
    </body>
    </html>


    h5c-min.js:
    $.error=function(a){var b=["Необходимое поле не заполнено!","Неверный формат!"];alert(b[a])};$(function(){var a=navigator.userAgent;if(!((verOffset=a.indexOf("Opera"))!=-1||(verOffset=a.indexOf("Chrome"))!=-1||(verOffset=a.indexOf("Safari"))!=-1)){$("input[type=email]").each(function(){if($(this).attr("pattern")===undefined){$(this).attr("pattern","([a-z,0-9,_,-,.])[email protected]([a-z,0-9,_,-])+(.([a-z,0-9])+)+")}});$("form").submit(function(){var c=true;$(this).find("input").each(function(){if($(this).attr("required")!==undefined){if($(this).val()===""){$(this).focus();$.error(0);c=false;return c}}if($(this).attr("pattern")!==undefined){var d=new RegExp("^"+$(this).attr("pattern")+"$","ig");if($(this).attr("required")===undefined&&$(this).val()==""){return true}else{if(!(d.test($(this).val()))){$(this).focus();$.error(1);c=false;return c}}}});if(!c){return false}});function b©{var d=true;if(c.attr("required")===undefined&&c.attr("pattern")===undefined&&c.attr("type")!=="text"){return true}if(c.attr("required")!==undefined){if(c.val()===""){d=false}}if(c.attr("pattern")!==undefined){var e=new RegExp("^"+c.attr("pattern")+"$","ig");if(c.attr("required")===undefined&&c.val()===""){d=true}else{if(!(e.test(c.val()))){d=false}}}if(c.attr("required")===undefined&&c.attr("pattern")===undefined){d=true}if(!d){c.removeClass("invalid valid").addClass("invalid")}else{c.removeClass("invalid valid").addClass("valid")}}$("input").keyup(function(){b($(this))}).focus(function(){b($(this))}).focusout(function(){$(this).removeClass("invalid valid")})}});


    h5c.css:
    input[type=text]:focus:valid,
    input[type=email]:focus:valid,
    input[type=number]:focus:in-range
    {
    outline: #0f0 solid 1px;
    }

    .valid
    {
    outline: #0f0 solid 1px;
    }

    input[type=text]:focus:invalid,
    input[type=email]:focus:invalid,
    input[type=number]:focus:out-of-range
    {
    outline: #f00 solid 1px;
    }

    .invalid
    {
    outline: #f00 solid 1px;
    }
  • md5

    Сообщения: 11957 Репутация: N Группа: в ухо

    Spritz 27 января 2011 г. 2:32, спустя 33 минуты 16 секунд

    в а ИЕ 5.5 работает? :D
    все умрут, а я изумруд
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 27 января 2011 г. 2:34, спустя 1 минуту 41 секунду

    я этот паттерн скопировал и не особо в нем разбирался) главное что он работает

    ага)) и для него валидно и такое мыло ,,@,,.,,
    Высокоуровневое абстрактное говно
  • fgets

    Сообщения: 1099 Репутация: N Группа: Кто попало

    Spritz 27 января 2011 г. 2:42, спустя 8 минут 5 секунд

    Всё в виде небольшого модуля к jquery, от вас требуется лишь подключить файл модуля и задать CSS и функцию ошибки.
    Модуль можно взять тут: http://xmast.net/h5c-min.js
    Пример можно посмотреть тут: http://xmast.net/html5test.html
    подключение и ф-ия ошибки:
    <meta name="X-UA-Compatible" content="IE=9">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="h5c-min.js"></script>
    <script type="text/javascript">
    $.html5verror = function (eid) {
    var message = ['Необходимое поле не заполнено!', 'Неверный формат!'];
    $('#error').html(message[eid]);
    }
    </script>

    Проверялось в Safari, Opera 11, Chrome 3, Firefox 3.6, IE8, IE9

    всё работает!
    Спустя 220 сек.

    я этот паттерн скопировал и не особо в нем разбирался) главное что он работает

    ага)) и для него валидно и такое мыло ,,@,,.,,


    ну покажи свой регексп тогда хуле
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 27 января 2011 г. 3:09, спустя 27 минут 45 секунд

    ну покажи свой регексп тогда хуле

    ([\w-\.]+)@((?:[\w]+\.)+)([a-zA-Z]{2,4})
    Высокоуровневое абстрактное говно
  • fgets

    Сообщения: 1099 Репутация: N Группа: Кто попало

    Spritz 27 января 2011 г. 3:35, спустя 25 минут 3 секунды


    ну покажи свой регексп тогда хуле

    ([\w-\.]+)@((?:[\w]+\.)+)([a-zA-Z]{2,4})


    почему именно 2,4? [email protected] пропустит? .xn-p1a1?
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 27 января 2011 г. 4:54, спустя 1 час 19 минут 29 секунд

    [email protected] пропустит?

    кто ж такое говно будет писать в форме?
    и .рф гавно…
    Высокоуровневое абстрактное говно
  • fgets

    Сообщения: 1099 Репутация: N Группа: Кто попало

    Spritz 27 января 2011 г. 5:01, спустя 6 минут 52 секунды


    [email protected] пропустит?

    кто ж такое говно будет писать в форме?
    и .рф гавно…


    не пизди)
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 27 января 2011 г. 5:13, спустя 11 минут 59 секунд

    не пизди)

    да ради Бога, ставь ту космическую хуйню… все равно по ней не пройдет твой [email protected], а -,,,[email protected],,,-.,, пройдет как нехуй делать)))
    Высокоуровневое абстрактное говно
  • krasun

    Сообщения: 1370 Репутация: N Группа: Джедаи

    Spritz 28 января 2011 г. 8:36, спустя 1 день 3 часа 23 минуты

    ибо chrome и safari тоже mozilla

    дальше тему не читал

Пожалуйста, авторизуйтесь, чтобы написать комментарий!