禁用html表单提交按钮,直到只输入具有必需属性的字段
我想隐藏html表单的提交按钮,直到输入所需的字段,有人能告诉我怎么做吗? 这是我的密码:禁用html表单提交按钮,直到只输入具有必需属性的字段,html,Html,我想隐藏html表单的提交按钮,直到输入所需的字段,有人能告诉我怎么做吗? 这是我的密码: <form name="signup" action="mailto:chowhiuyu@gmail.com" method="post" enctype="text/plain"> Enter Student ID: <input type="text" name="student_ID" size="30%" required > <br>G
<form name="signup" action="mailto:chowhiuyu@gmail.com" method="post" enctype="text/plain">
Enter Student ID:
<input type="text" name="student_ID" size="30%" required >
<br>Gender: <input type="radio" name="gender" value="male" required>Male <input type="radio" name="gender" value="Female" required>Female
<br>Form:<select name="Form" required>
<option value="F1">F1</option>
<option Value="F2">F2</option>
<option value="F3">F3</option>
<option value="F4">F4</option>
<option value="F5">F5</option>
<option value="F6">F6</option>
</select>
<br>Electives chosen:
<input type="checkbox" name="Elective" value="Physics">Physics
<input type="checkbox" name="Elective" value="Chemistry">Chemistry
<input type="checkbox" name="Elective" value="Biology">Biology
<br>
<input type="checkbox" name="Elective" value="History">History
<input type="checkbox" name="Elective" value="Chinese History">Chinese History
<input type="checkbox" name="Elective" value="Music">Music
<input type="checkbox" name="Elective" value="Englit">English Literature
<br>
<input type="checkbox" name="Elective" value="Physical Education">Physical Education
<input type="checkbox" name="Elective" value="Visual Arts">Visual Arts
<input type="checkbox" name="Elective" value="business">Business Management
<input type="checkbox" name="Elective" value="Accounting">Accounting
<br>
Password:
<input type="password" name="password" placeholder="Password" id="password" size="30%" required>
<br>Re-enter Password:
<input type="password" name="password_check" placeholder="Confirm Password" id="confirm_password" size="30%" required>
<p>
<input type="submit" name="submit" value="Submit" onclick="window.alert('Your Request will be processed soon!');">
<input type="reset" name="Reset" Value="Reset">
</p>
输入学生ID:
性别:男女
表格:
一层楼
地上二层
F3
F4
F5
F6
选择的选修课:
物理
化学
生物
历史
中国历史
音乐
英国文学
体育
视觉艺术
企业管理
会计
密码:
重新输入密码:
看看这个
如果至少有一个字段为空,则按钮将保持禁用状态。隐藏和禁用的可能重复是两种不同的场景,如果仅当具有必需属性的字段为空时,我才想禁用提交按钮inputted@Hiuyu2001即使按“回车”键,也可以提交表格。没有计划处理该用例?在我看来,隐藏提交按钮将是糟糕的UI/UX设计。因为您标记了这个HTML5,所以可以使用来阻止提交,直到所有字段都填写完毕。您可能希望添加一些JS作为备用,以防有人使用不支持它的浏览器。
(function() {
$('form > input').keyup(function() {
var empty = false;
$('form > input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#register').attr('disabled', 'disabled');
} else {
$('#register').removeAttr('disabled');
}
});
})()