在下面的图片中，有三个输入字段，需要输入一个数字，当输入时，将启用提交按钮来提交表格。
下面提到的代码是该表格的HTML。
*HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="some-container">
<div class="team team-a">
<h2>Team A Records</h2>
<div class="record-box">
<div class="input-field">
<label for="record-1"> Record 1</label>
<input type="text" id="record-1" data-valid="false" />
<div class="error">number please</div>
</div>b
<div class="input-field">
<label for="record-2"> Record 2</label>
<input type="text" id="record-2" data-valid="false" />
<div class="error">number please</div>
</div>
<div class="input-field">
<label for="record-3"> Record 3</label>
<input type="text" id="record-3" data-valid="false" />
<div class="error">number please</div>
</div>
</div>
</div>
<button class="btn" disabled>Submit</button>
</div>
在HTML表单中，我们使用了一个容器DIV，其中放置了输入文件和它们各自的类别。在所有的三个输入字段中，初始的数据有效属性被设置为 "false"。
在这个父div中，我们放置了提交按钮，它的类是按钮，属性是 "disabled"。
*CSS
下面提到的代码是输入字段表单的css。
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: "Montserrat", sans-serif;
scroll-behavior: smooth;
text-align: center;
overflow-x: hidden;
color: #08085c;
background-color: #111;
}
.container {
width: 80%;
height: 50vh;
background-color: #fff;
margin: auto;
display: flex;
}
.team {
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: center;
align-items: center;
}
.team-a {
background-color: bisque;
}
.error {
text-align: right;
color: red;
opacity: 0;
}
.raise-error+.error {
opacity: 1;
}
input.raise-error {
border: 1px solid red;
}
.record-box {
margin-top: 20px;
}
label {
margin-right: 10px;
}
.btn {
margin-top: 20px;
padding: 10px 20px;
cursor: pointer;
}
* Jquery
这段代码是为了实现按钮的禁用和启用功能。
$("input").blur(function() {
if (!Number($(this).val()) || $(this).val() === "") {
$(this).addClass("raise-error");
$(this).attr('data-valid', 'false');
} else {
$(this).removeClass("raise-error");
$(this).attr('data-valid', 'true');
}
$('.btn')[$('[data-valid="false"]').length > 0 ? 'attr' : 'removeAttr']('disabled', 'disabled');
});
在代码中，有一个由if,else条件组成的函数。
这些条件是通过提到的css类改变的。
首先，如果Number输入字段的值是空的，那么它通过使用一个叫做addClass的方法添加了一个css类 "raise-error"，这是用来添加一个css类名称来提高或给出一个验证错误信息。在if条件中，它还检查data-valid属性是否为false。而在else条件中，它使用removeClass方法来删除 "raise-error "css类，只有当data-valid属性为真时。
，即当数字输入域有一些值时。
最后，在Jquery中，它添加了如果提交按钮的css类是 "btn"，并且文件lds的data-valid属性是假的，并且输入字段值的长度大于0时，使用带有禁用属性的"'removeAttr'"类。
一旦表单被填入数字值，它将删除错误信息并启用提交按钮。正如下面的图片所示
The postRemove disable attribute from a button after input validation in JavaScriptappeared first oni2tutorials.
