Атрибут соответствия данных не работает с 'bootstrap' - PullRequest
0 голосов
/ 05 августа 2020

У меня есть форма, в которой пользователь вводит свой адрес электронной почты. Я также ввел еще одно поле электронной почты, в котором пользователя просят повторно ввести тот же адрес электронной почты. Я пытаюсь провести валидацию, чтобы проверить, совпадают ли они оба. Но это не работает.

Пожалуйста, проверьте код ниже.

<!DOCTYPE html>
<html>
<title>Stripe Payment Demo</title>

<head>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/4.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>

</head>

<body>

    <div class="container">
        <form action="payment" id="myForm" method="POST" data-toggle="validator" enctype="multipart/form-data">

            <div class="form-group">
                <label for="uname">Full Name:</label>
                <input type="text" id="fname" class="form-control" name="uname" maxlength="50" placeholder="John"
                    required>
            </div>

            <div class="form-group">
                <label for="file">Select your picture :</label>
                <input type="file" class="form-control" id="myfile" name="file">
            </div>

            <div class="form-group">
                <label for="tag1">Search Keyword 1:</label>
                <input required type="text" class="form-control" id="tag1" name="tag1" maxlength="50"
                    placeholder="Enter keyword 1">
            </div>
            <div class="form-group">
                <label for="tag2">Search Keyword 2:</label>
                <input type="text" class="form-control" id="tag2" name="tag2" maxlength="50"
                    placeholder="Enter keyword 2">
            </div>
            <div class="form-group">
                <label for="website">Website:</label>
                <input type="text" class="form-control" id="website" name="website" maxlength="70"
                    placeholder="Enter the website">
            </div>
            <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" class="form-control" id="email" name="email" maxlength="100"
                    pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" placeholder="Enter your email" required>
            </div>
            <div class="form-group">
                <label for="confirmemail">Confirm Email:</label>
                <input type="email" class="form-control" id="confirmemail" name="confirmemail" maxlength="100"
                    data-match="#email" data-match-error="Whoops" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
                    placeholder="Re-enter your email" required>
            </div>

            <div class="form-group">
                <label for="description">About you:</label>
                <textarea class="form-control" id="description" maxlength="160" rows="3"></textarea>
            </div>

            <div class="form-group">
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>

        </form>
    </div>
</body>

</html>

'data-match = "# email"' не действует. Форма отправляется даже после ввода другого адреса электронной почты

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...