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

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

  • fgets

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

    Spritz 27 января 2011 г. 7:47, спустя 48 минут 18 секунд

    вот накидал примерчик

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script type="text/javascript">
    $(function () {
    var nAgt = navigator.userAgent;
    if (!((verOffset=nAgt.indexOf("Opera"))!=-1||(verOffset=nAgt.indexOf("Chrome"))!=-1||(verOffset=nAgt.indexOf("Safari"))!=-1)) {
    $('form').submit(function () {
    /** тут проверка */

    /** блокируем submit */
    return false;
    })}
    });
    </script>
    </head>
    <body>
    <form>
    <input type="text" name="test" value="" required />
    <input type="submit" />
    </form>
    </body>
    </html>
    Спустя 202 сек.
    если сегодня вечерком будет время - доработаю, для самоинтереса
  • fgets

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

    Spritz 27 января 2011 г. 8:13, спустя 26 минут 9 секунд

    рабочий вариант:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script type="text/javascript">
    $(function () {
    var nAgt = navigator.userAgent;
    if (!((verOffset=nAgt.indexOf("Opera"))!=-1||(verOffset=nAgt.indexOf("Chrome"))!=-1||(verOffset=nAgt.indexOf("Safari"))!=-1)) {
    $('form').submit(function () {
    var checked = true;
    $(this).find('input').each(function() {
    if ($(this).attr('required') !== undefined)
    {
    if ($(this).val() === '') {
    alert('Необходимое поле не заполнено!');
    checked = false;
    }
    }
    })
    if (!checked) return false;
    })}
    });
    </script>
    </head>
    <body>
    <form>
    <input type="text" name="test" value="" required />
    <input type="submit" />
    </form>
    </body>
    </html>
  • fgets

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

    Spritz 27 января 2011 г. 8:19, спустя 6 минут 9 секунд

    переработал ещё чуток:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script type="text/javascript">
    $(function () {
    var nAgt = navigator.userAgent;
    if (!((verOffset=nAgt.indexOf("Opera"))!=-1||(verOffset=nAgt.indexOf("Chrome"))!=-1||(verOffset=nAgt.indexOf("Safari"))!=-1)) {
    $('form').submit(function () {
    var checked = true;
    $(this).find('input').each(function() {
    if ($(this).attr('required') !== undefined)
    {
    if ($(this).val() === '') {
    alert('Необходимое поле не заполнено!');
    $(this).focus();
    checked = false;
    return false;
    }
    }
    })
    if (!checked) return false;
    })}
    });
    </script>
    </head>
    <body>
    <form>
    <input type="text" name="test1" value="" required />
    <input type="text" name="test2" value="" required />
    <input type="text" name="test3" value="" />
    <input type="submit" />
    </form>
    </body>
    </html>
  • fgets

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

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

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

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


    работает в Opera Safari Chrome
  • fgets

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

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

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <style type="text/css">
    input[type=text]:focus:valid,
    input[type=email]:focus:valid,
    input[type=number]:focus:in-range
    {
    outline: 1px #0f0 solid;
    }

    input[type=text]:focus:invalid,
    input[type=email]:focus:invalid,
    input[type=number]:focus:out-of-range
    {
    outline: 1px #f00 solid;
    }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script type="text/javascript">
    $(function () {
    var nAgt = navigator.userAgent;
    if (!((verOffset=nAgt.indexOf("Opera"))!=-1||(verOffset=nAgt.indexOf("Chrome"))!=-1||(verOffset=nAgt.indexOf("Safari"))!=-1)) {
    $('form').submit(function () {
    var checked = true;
    $(this).find('input').each(function() {
    if ($(this).attr('required') !== undefined)
    {
    if ($(this).val() === '') {
    $(this).focus();
    alert('Необходимое поле не заполнено!');
    checked = false;
    return checked;
    }
    }

    if ($(this).attr('pattern') !== undefined)
    {
    var preg = new RegExp($(this).attr('pattern'), 'ig');
    if (!(preg.test($(this).val()))) {
    $(this).focus();
    alert('Неверный формат!');
    checked = false;
    return checked;
    }
    }
    })
    if (!checked) return false;
    })}
    });
    </script>
    </head>
    <body>
    <form>
    <input type="text" name="test1" value="" required pattern="[0-9]+" />
    <input type="text" name="test2" value="" required />
    <input type="text" name="test3" value="" />
    <input type="submit" />
    </form>
    </body>
    </html>


    required + pattern кроссбраузерно!
  • fgets

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

    Spritz 27 января 2011 г. 8:48, спустя 7 минут 24 секунды


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

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


    работает в Opera Safari Chrome


    и это тоже можно сделать кроссбраузерно
  • fgets

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

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

    в коде что я изложил выше много говна т.к. писался он на скорую руку, щас переделаю
    Спустя 290 сек.
    во

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>html5 test</title>
    <style type="text/css">
    .valid,
    input[type=text]:focus:valid,
    input[type=email]:focus:valid,
    input[type=number]:focus:in-range
    {
    outline: 1px #0f0 solid;
    }

    .invalid,
    input[type=text]:focus:invalid,
    input[type=email]:focus:invalid,
    input[type=number]:focus:out-of-range
    {
    outline: 1px #f00 solid;
    }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script type="text/javascript">
    $(function () {
    var nAgt = navigator.userAgent;
    if (!((verOffset=nAgt.indexOf("Opera"))!=-1||(verOffset=nAgt.indexOf("Chrome"))!=-1||(verOffset=nAgt.indexOf("Safari"))!=-1)) {
    $('form').submit(function () {
    var checked = true;
    $(this).find('input').each(function() {
    if ($(this).attr('required') !== undefined)
    {
    if ($(this).val() === '') {
    $(this).focus();
    alert('Необходимое поле не заполнено!');
    checked = false;
    return checked;
    }
    }

    if ($(this).attr('pattern') !== undefined)
    {
    var preg = new RegExp('^'+$(this).attr('pattern')+'$', 'ig');
    if (!(preg.test($(this).val()))) {
    $(this).focus();
    alert('Неверный формат!');
    checked = false;
    return checked;
    }
    }
    })
    if (!checked) return false;
    })

    function csschecked (element) {
    /** реализуем кроссплатформенные css3 подсказки */
    var checked = 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 (!(preg.test(element.val()))) {
    checked = false;
    }
    }

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

    $('input').keyup(function (){csschecked($(this))})
    .focus(function (){csschecked($(this))})
    .focusout(function () {$(this).removeClass('invalid valid')});
    }});
    </script>
    </head>
    <body>
    <form>
    <input type="text" name="test1" value="" required pattern="[0-9]+" />
    <input type="text" name="test2" value="" required />
    <input type="text" name="test3" value="" />
    <input type="submit" />
    </form>
    </body>
    </html>
  • fgets

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

    Spritz 27 января 2011 г. 9:44, спустя 17 минут 17 секунд

    в csschecked надо добавить это:

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

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

    Spritz 27 января 2011 г. 9:50, спустя 5 минут 30 секунд

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>html5 test</title>
    <style type="text/css">
    .valid,
    input[type=text]:focus:valid,
    input[type=email]:focus:valid,
    input[type=number]:focus:in-range
    {
    outline: 1px #0f0 solid;
    }

    .invalid,
    input[type=text]:focus:invalid,
    input[type=email]:focus:invalid,
    input[type=number]:focus:out-of-range
    {
    outline: 1px #f00 solid;
    }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script type="text/javascript">
    $(function () {
    var nAgt = navigator.userAgent;
    if (!((verOffset=nAgt.indexOf("Opera"))!=-1||(verOffset=nAgt.indexOf("Chrome"))!=-1||(verOffset=nAgt.indexOf("Safari"))!=-1)) {
    $('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 (!(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)
    {
    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 (!(preg.test(element.val()))) {
    checked = false;
    }
    }

    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')});
    }});
    </script>
    </head>
    <body>
    <form>
    <input type="text" name="test1" value="" required pattern="[0-9]+" />
    <input type="text" name="test2" value="" required />
    <input type="text" name="test3" value="" />
    <input type="submit" />
    <div id="error"></div>
    </form>
    </body>
    </html>
  • fgets

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

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

    пойду скачаю осла 9, говорят в нём есть поддержка html5, если это так то код надо будет чуток доработать убрав проверку для 9 осла
  • fgets

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

    Spritz 27 января 2011 г. 10:21, спустя 22 минуты 29 секунд

    ложь пиздёж и провокация - outline так и не робит в ie9, ну и html5 там тоже хуёво, так что код изменять не придётся
  • fgets

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

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

    короче вот полностью кроссплатформенный вариант, по крайней мере в IE9 точно робит, в IE8 наверное не будет работать outline

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <title>html5 test</title>
    <style type="text/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;
    }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script type="text/javascript">
    $(function () {
    var nAgt = navigator.userAgent;
    if (!((verOffset=nAgt.indexOf("Opera"))!=-1||(verOffset=nAgt.indexOf("Chrome"))!=-1||(verOffset=nAgt.indexOf("Safari"))!=-1)) {
    $('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 (!(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)
    {
    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 (!(preg.test(element.val()))) {
    checked = false;
    }
    }

    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')});
    }});
    </script>
    </head>
    <body>
    <form>
    <input type="text" name="test1" value="" required pattern="[0-9]+" />
    <input type="text" name="test2" value="" required />
    <input type="text" name="test3" value="" />
    <input type="submit" />
    <div id="error"></div>
    </form>
    </body>
    </html>
  • fgets

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

    Spritz 27 января 2011 г. 10:58, спустя 26 минут 53 секунды

    теперь ещё реализовал type=email

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9">
    <title>html5 test</title>
    <style type="text/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;
    }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script type="text/javascript">
    $(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() {
    $(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)
    {
    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 (!(preg.test(element.val()))) {
    checked = false;
    }
    }

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


    вроде бы всё ок и даже работает в осле, НО столкнулся с дикими багами 9 осла, как обойти пока хз, сейчас выложу скрины багов
  • fgets

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

    Spritz 27 января 2011 г. 11:04, спустя 6 минут

  • fgets

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

    Spritz 27 января 2011 г. 11:20, спустя 15 минут 10 секунд

    доработал ещё чуток

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9">
    <title>html5 test</title>
    <style type="text/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;
    }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script type="text/javascript">
    $(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')});
    }});
    </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>
    Спустя 64 сек.
    проверил в Opera 11, Chrome, Firefox 3.6 - всё работает отлично

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