时间戳

首页 > 解决方案 > HTML 中的“必需”属性不起作用

javascript - HTML 中的“必需”属性不起作用

问题描述

'required' 属性在提交表单时不起作用。我在网上寻找解决方法，但没有一个能解决我的问题。请看下面的代码，我在第一个字段中使用了 required 属性，但是当我点击提交时，它没有显示任何错误。

此外， data-match="#email" 似乎无法检查电子邮件是否与确认电子邮件匹配。

<!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>

    <style>
        body {
            margin: 0 auto;
            width: 800px;
        }

        form {
            width: 100%;
            margin: 0 auto;
        }
    </style>

</head>

<body>
    <div class="container">
        <form action="payment" method="POST" 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" value="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" value="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" value="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"
                    value="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,}$" value="Enter your email">
            </div>
            <div class="form-group">
                <label for="confirmemail">Confirm Email:</label>
                <input type="confirmemail" class="form-control" id="confirmemail" name="email" maxlength="100"
                    data-match="#email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" value="Re-enter your email">
            </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>

标签： javascripthtmljquerybootstrap-4

解决方案

value您在属性中有预定义的值。将其替换为placeholder

<input required type="text" class="form-control" id="tag1" name="tag1" maxlength="50" placeholder="Enter keyword 1">

推荐阅读