SAPID INFO

Скрипт проверки заполнения обязательных полей формы

На момент публикации материала устройства, работающие на базе iOS “не понимают” атрибут required. Потому потребовалось написать JS, проверяющий заполненность полей. Для его работы потребуется jQuery.

Что именно делает скрипт? Проверяет, заполнено ли поле input, если у него установлен class required, а атрибут name имеет значение name, phone или email.

Код двух форм, кликая на кнопки которых можно проверить работу скрипта:

<div>
    <form method="post" enctype="multipart/form-data">
        <input type="text" name="name" placeholder="name">
        <input type="text" name="phone" placeholder="phone or skype">
        <input type="email" name="email" class="required" placeholder="email">
        <input type="submit" name="send_requt" class="button" title="Отправить запрос" value="Отправить запрос">
    </form>
</div>
<div>
    <form method="post" enctype="multipart/form-data">
        <input type="text" name="name" placeholder="name">
        <input type="text" name="phone" class="required" placeholder="phone or skype">
        <input type="email" name="email" class="required" placeholder="email">
        <input type="submit" name="send_request" class="button" title="Отправить запрос" value="Отправить запрос">
    </form>
</div>

Код скрипта:

<script>
$('form').submit(function() { if( $(this).isCorrectRequest() === true){ return true; } else { return false; } });
    
(function($) {
    $.fn.isCorrectRequest = function() {
        
        this.find('input[type=text]').removeClass('incorrect');
        this.find('input[type=email]').removeClass('incorrect');
        
        var cansend = 'true';

        if (this.find('input[name=name]').hasClass("required"))
            {
            var nameInput = $(this).find('input[name=name]');
            nameInput.val($.trim(nameInput.val()));
                if(nameInput.val() !== undefined){
                    if(nameInput.val().length === 0)
                    {
                        nameInput.addClass('incorrect');
                        if( cansend !== 'false') { nameInput.focus(); }
                        cansend = 'false';

                    }
                }
            }
        if (this.find('input[name=phone]').hasClass("required"))
            {
            var phoneInput = $(this).find('input[name=phone]');
            phoneInput.val($.trim(phoneInput.val()));
                if(phoneInput.val() !== undefined){
                    if(phoneInput.val().length === 0)
                    {
                        phoneInput.addClass('incorrect');
                        if( cansend !== 'false') { phoneInput.focus(); }
                        cansend = 'false';
                    }
                }
            }
        if (this.find('input[name=email]').hasClass("required"))
            {
            var emailInput = $(this).find('input[name=email]');
            emailInput.val($.trim(emailInput.val()));
                if(emailInput.val() !== undefined){
                    if(emailInput.val().length === 0)
                    {
                        emailInput.addClass('incorrect');
                        if( cansend !== 'false') { emailInput.focus(); }
                        cansend = 'false';
                    }
                }
            }

        if( cansend === 'false') { return false; } else { return true; }
    };
})(jQuery);
</script>

Код css, обеспечивающий подсветку обязательного незаполненного поля:

<style>
.incorrect { border: 2px solid red; }
</style>

 


Комментарии к статье
Alex, Декабрь 12, 2016 в 1:03 пп:

Можно использовать также маску для вывода номера телефона:

$('[name=phone]').mask("+38 (999) 999-99-99");
ИСаша, Январь 9, 2017 в 2:41 пп:
if (this.find('textarea[name=form_problem]').hasClass("required"))
            {
            var nameInput = $(this).find('textarea[name=form_problem]');
            nameInput.val($.trim(nameInput.val()));
                if(nameInput.val() !== undefined){
                    if(nameInput.val().length === 0)
                    {
                        nameInput.addClass('incorrect');
                        if( cansend !== 'false') { nameInput.focus(); }
                        cansend = 'false';
 
                    }
                }
            }
fen1x, Январь 9, 2017 в 2:56 пп:

Для textarea в строку 9 можно вставить следующее:
this.find(‘textarea’).removeClass(‘incorrect’);

Alex, Январь 12, 2017 в 6:53 пп:

Стили лучше сделать такими

.incorrect {border: 1px solid red !important;}
.incorrect:focus {outline-color: transparent;}

!important – добавляем чтобы всегда срабатывал цвет
outline – для скрытия внешней границы при фокусе у input

Добавьте свой комментарий - оставьте след в блоге!