HTML中的“必需”属性不起作用[关闭]答案

【问题标题】：'Required' Attribute in HTML is not working [closed]HTML中的“必需”属性不起作用[关闭]
【发布时间】：2020-08-05 20:48:40
【问题描述】：

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

【问题讨论】：

请阅读 minimal reproducible example - 您的问题只需要 1 行代码，可能使用 <form> 和 <button type=submit> 以确保完整性 - 其余部分会让人感到困惑并且人们不太可能帮助您。

标签： javascript html jquery bootstrap-4

【解决方案1】：

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

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

【讨论】：

想知道从“价值”更改为“占位符”会如何影响它。但是，它奏效了！我怎么也猜不到！你似乎错过了我的另一个问题。 “data-match="#email" 不起作用。我想验证两封电子邮件是否匹配。
data-match 在 bootstrap3 中，但不在 4 版本中。用 JS 手动检查 @rakeshmehra

【解决方案2】：

您需要在输入标签中使用占位符而不是值：

您的代码：<input type="text" id="fname" class="form-control" name="uname" maxlength="50" value="John" required>

使用以下代码：<input type="text" id="fname" class="form-control" name="uname" maxlength="50" placeholder="John" required>

【讨论】：

重新发布他的整个代码是没有意义的，通常最好只指出错误的地方，以便解决方案更通用。