Проверка HTML-формы с помощью петрушки

Последнее обновление Июл 12, 2021

Содержание

Вы хотите применить проверки к своей HTML-форме? Проверки на стороне клиента полезны для обеспечения того, чтобы все поля формы были заполнены и в надлежащем формате. Это помогает пользователям немедленно исправить любые недействительные данные. У вас всегда должны быть проверки на стороне клиента в формах вашего веб-сайта. Если вы пропустите его и примените только проверку на стороне сервера, это приведет к задержке отправки формы в случае каких-либо ошибок.

Parsley – полезная библиотека проверки форм, которую легко интегрировать. Эта библиотека обеспечивает лучший пользовательский интерфейс по сравнению с проверками HTML5 по умолчанию. Вам нужно написать всего несколько утверждений, и все готово. Parsley предоставляет богатый набор опций, с помощью которых вы можете расширить свои собственные проверки. Я не собираюсь описывать каждый вариант. Цель этого руководства – познакомить вас с Parsley и показать, как применять базовые проверки. Можно изучить их документацию и ознакомиться со всеми функциями, которые предоставляет библиотека.

В этом руководстве я собираюсь создать простую форму с несколькими полями, такими как имя, адрес электронной почты, пол и т.д. Все поля формы являются обязательными, и мы будем применять проверки с помощью Parsley в нашей форме.

Чтобы проверить форму с помощью Parsley, нам нужно включить ее JS-файл. Я сделаю это с помощью CDN.

Петрушка рекомендует использовать собственный стиль для сообщений об ошибках. Но для тестирования вы можете использовать их файл CSS, доступный по этой ссылке.

Как использовать петрушку

В демонстрационных целях я собираюсь создать форму с помощью Bootstrap. Поэтому я включу Bootstrap с использованием CDN вместе с файлами Parsley. Я также включаю jQuery, поскольку от него зависит Parsley.

<link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" />
<link rel="stylesheet"  href="http://parsleyjs.org/src/parsley.css" />
<div class="container">
    <form class="form-horizontal" id="signup_form">
        <div class="form-group">
            <label for="inputFirstName" class="col-sm-2 control-label">First Name</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="inputFirstName" name="first_name" placeholder="First Name" required>
            </div>
        </div>
        <div class="form-group">
            <label for="inputLastName" class="col-sm-2 control-label">Last Name</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="inputLastName" name="last_name" placeholder="Last Name" required>
            </div>
        </div>
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
            <div class="col-sm-4">
                <input type="email" class="form-control" id="inputEmail3" name="email" placeholder="Email" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">Gender</label>
            <div class="col-sm-4">
                <div class="gender">
                    <input type="radio" name="gender" value="male" required> Male
                    <input type="radio" name="gender" value="female" required> Female
                      
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">Skills</label>
            <div class="col-sm-4">
                <div class="skills">
                    <input type="checkbox" name="skills[]" value="php" required> PHP
                    <input type="checkbox" name="skills[]" value="mysql" required> MySQL
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-primary">Sign in</button>
            </div>
        </div>
    </form>
</div>
 
<script  src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.2/parsley.min.js"></script>
<script >
    jQuery('#signup_form').parsley();
</script>

В приведенный выше код я включил все необходимые файлы JS и CSS с помощью CDN. Наконец, я использовал $('#signup_form').parsley();где #signup_form – это идентификатор формы. Теперь, когда вы нажмете кнопку «Отправить» напрямую, отобразятся ошибки, как показано на скриншоте ниже.

После исправления всех ошибок Parsley позволяет вам отправить форму, которую вы затем отправите для обработки на стороне сервера.

Надеюсь, вы понимаете, как проверять HTML-формы с помощью Parsley. Пожалуйста, поделитесь своими мыслями и предложениями в разделе комментариев ниже.

Статьи по Теме

Источник записи: artisansweb.net