如何解决提交按钮激活错误？
如果其中一个字段有效，则激活按钮。
据我了解，有必要选择所有错误，并且如果有多个错误-已禁用
代码验证
var forms = document.querySelectorAll('.validate');
for (var i = 0; i < forms.length; i++) {
forms[i].setAttribute('novalidate', true);
forms[i].lastElementChild.setAttribute('disabled', true);
}
// function has error
var hasError = function(field) {
if (field.disabled || field.type === 'file' || field.type === 'reset' || field.type === 'submit' || field.type === 'button') return;
var validity = field.validity;
if (validity.valid) {
return;
}
if (validity.valueMissing) {
return 'This is a required field';
}
if (validity.typeMismatch) {
// URL
if (field.type === 'url') {
return 'There should be a link';
}
}
if (validity.tooShort) {
return 'Must be from ' + field.getAttribute('minLength') + ' to ' + field.getAttribute('maxLength') + ' characters';
}
if (validity.tooLong) {
return 'Must be from ' + field.getAttribute('minLength') + ' to ' + field.getAttribute('maxLength') + ' characters';
}
return 'Error';
};
// function show error
var showError = function(field, error) {
field.classList.add('error');
var id = field.id || field.name;
if (!id) return;
var message = field.form.querySelector('.error-message#error-for-' + id);
if (!message) {
message = document.createElement('div');
message.className = 'error-message';
message.id = 'error-for-' + id;
field.parentNode.insertBefore(message, field.nextSibling);
}
field.setAttribute('aria-describedby', 'error-for-' + id);
message.innerHTML = error;
message.style.display = 'block';
message.style.visibility = 'visible';
};
// function remove error
var removeError = function(field) {
field.classList.remove('error');
field.removeAttribute('aria-describedby');
var id = field.id || field.name;
if (!id) return;
var message = field.form.querySelector('.error-message#error-for-' + id + '');
if (!message) return;
message.innerHTML = '';
message.style.display = 'none';
message.style.visibility = 'hidden';
};
// function check field
function checkInput(event) {
if (!event.target.form.classList.contains('validate')) return;
var error = hasError(event.target);
if (error) {
event.target.parentElement.parentElement.lastElementChild.setAttribute('disabled', true);
showError(event.target, error);
return;
}
removeError(event.target);
event.target.parentElement.parentElement.lastElementChild.removeAttribute('disabled');
}
// function check fields
function validationForm(event) {
if (!event.target.classList.contains('validate')) return;
var fields = event.target.elements;
var error, hasErrors;
for (var i = 0; i < fields.length; i++) {
error = hasError(fields[i]);
if (error) {
showError(fields[i], error);
if (!hasErrors) {
hasErrors = fields[i];
}
}
}
if (hasErrors) {
event.preventDefault();
hasErrors.focus();
}
}
document.addEventListener('input', checkInput);
document.addEventListener('submit', validationForm);input {
display: inline-block;
font-size: 1em;
margin-bottom: 5px;
padding: 0.25em 0.5em;
width: 100%;
}
.button[disabled],
.button[disabled]:active,
.button[disabled]:focus,
.button[disabled]:hover {
border-color: #ccc;
background-color: #ccc;
}
.button {
background-color: #0088cc;
border: 1px solid #0088cc;
color: #ffffff;
display: inline-block;
font-size: 0.9375em;
font-weight: normal;
line-height: 1.2;
margin-right: 0.3125em;
margin-bottom: 0.3125em;
padding: 0.5em 0.6875em;
width: auto;
}
.button:active,
.button:focus,
.button:hover {
background-color: #005580;
border-color: #005580;
color: #ffffff;
text-decoration: none;
}
/**
* Errors
*/
.error {
border-color: red;
}
.error-message {
color: red;
font-size: 1rem;
margin-bottom: 15px;
}<form class="validate">
<div>
<input type="text" minlength="3" maxlength="40" name="name" placeholder="Enter name" required>
</div>
<div>
<input type="url" name="url" pattern="^(?:(?:https?|HTTPS?|ftp|FTP):\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-zA-Z\u00a1-\uffff0-9]-*)*[a-zA-Z\u00a1-\uffff0-9]+)(?:\.(?:[a-zA-Z\u00a1-\uffff0-9]-*)*[a-zA-Z\u00a1-\uffff0-9]+)*(?:\.(?:[a-zA-Z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})?(?:[/?#]\S*)?$"
placeholder="Enter url" required>
</div>
<input type="submit" class="button" value="Submit">
</form>
<br>
<form class="validate">
<div>
<input type="user" minlength="4" maxlength="40" id="user" placeholder="Enter user" required>
</div>
<div>
<input type="position" minlength="5" maxlength="50" id="position" placeholder="Enter position" required>
</div>
<input type="submit" class="button" value="Submit">
</form>
我想这是代码的问题部分
// function check field
function checkInput(event) {
if (!event.target.form.classList.contains('validate')) return;
var error = hasError(event.target);
if (error) {
event.target.parentElement.parentElement.lastElementChild.setAttribute('disabled', true);
showError(event.target, error);
return;
}
removeError(event.target);
event.target.parentElement.parentElement.lastElementChild.removeAttribute('disabled');
}
我希望仅当两个字段均通过验证后才能激活按钮。 但是，如果其中一个字段有效，则按钮将被激活
3 个答案:
答案 0 :(得分：1)
您将需要更新检查功能。当前功能只是在添加更改输入侦听器时验证要更改的输入。您将需要添加验证其他字段是否有错误的循环。
// function check field
function checkInput(event) {
if (!event.target.form.classList.contains('validate')) return;
var error = hasError(event.target);
if (error) {
event.target.parentElement.parentElement.lastElementChild.setAttribute('disabled', true);
showError(event.target, error);
return;
}
//To Check All fields If There is still an error
var fields = event.target.parentElement.parentElement.elements;
for (var i = 0; i < fields.length; i++) {
error = hasError(fields[i]);
if (error) {
removeError(event.target);
event.target.parentElement.parentElement.lastElementChild.setAttribute('disabled', true);
return;
}
}
removeError(event.target);
event.target.parentElement.parentElement.lastElementChild.removeAttribute('disabled');
}
答案 1 :(得分：1)
解决方案：
var forms = document.querySelectorAll('.validate');
for (var i = 0; i < forms.length; i++) {
forms[i].setAttribute('novalidate', true);
forms[i].lastElementChild.setAttribute('disabled', true);
}
// function has error
var hasError = function(field) {
if (field.disabled || field.type === 'file' || field.type === 'reset' || field.type === 'submit' || field.type === 'button') return;
var validity = field.validity;
if (validity.valid) {
return;
}
if (validity.valueMissing) {
return 'This is a required field';
}
if (validity.typeMismatch) {
// URL
if (field.type === 'url') {
return 'There should be a link';
}
}
if (validity.tooShort) {
return 'Must be from ' + field.getAttribute('minLength') + ' to ' + field.getAttribute('maxLength') + ' characters';
}
if (validity.tooLong) {
return 'Must be from ' + field.getAttribute('minLength') + ' to ' + field.getAttribute('maxLength') + ' characters';
}
return 'Error';
};
// function show error
var showError = function(field, error) {
field.classList.add('error');
var id = field.id || field.name;
if (!id) return;
var message = field.form.querySelector('.error-message#error-for-' + id);
if (!message) {
message = document.createElement('div');
message.className = 'error-message';
message.id = 'error-for-' + id;
field.parentNode.insertBefore(message, field.nextSibling);
}
field.setAttribute('aria-describedby', 'error-for-' + id);
message.innerHTML = error;
message.style.display = 'block';
message.style.visibility = 'visible';
};
// function remove error
var removeError = function(field) {
field.classList.remove('error');
field.removeAttribute('aria-describedby');
var id = field.id || field.name;
if (!id) return;
var message = field.form.querySelector('.error-message#error-for-' + id + '');
if (!message) return;
message.innerHTML = '';
message.style.display = 'none';
message.style.visibility = 'hidden';
};
// function check field
function checkInput(event) {
if (!event.target.form.classList.contains('validate')) return;
var error = hasError(event.target);
if (error) {
event.target.parentElement.parentElement.lastElementChild.setAttribute('disabled', true);
showError(event.target, error);
return;
}
//To Check All fields If There is still an error
var fields = event.target.parentElement.parentElement.elements;
for (var i = 0; i < fields.length; i++) {
error = hasError(fields[i]);
if (error) {
removeError(event.target);
event.target.parentElement.parentElement.lastElementChild.setAttribute('disabled', true);
return;
}
}
removeError(event.target);
event.target.parentElement.parentElement.lastElementChild.removeAttribute('disabled');
}
// function check fields
function validationForm(event) {
if (!event.target.classList.contains('validate')) return;
var fields = event.target.elements;
var error, hasErrors;
for (var i = 0; i < fields.length; i++) {
error = hasError(fields[i]);
if (error) {
showError(fields[i], error);
if (!hasErrors) {
hasErrors = fields[i];
}
}
}
if (hasErrors) {
event.preventDefault();
hasErrors.focus();
}
}
document.addEventListener('input', checkInput);
document.addEventListener('submit', validationForm);input {
display: inline-block;
font-size: 1em;
margin-bottom: 5px;
padding: 0.25em 0.5em;
width: 100%;
}
.button[disabled],
.button[disabled]:active,
.button[disabled]:focus,
.button[disabled]:hover {
border-color: #ccc;
background-color: #ccc;
}
.button {
background-color: #0088cc;
border: 1px solid #0088cc;
color: #ffffff;
display: inline-block;
font-size: 0.9375em;
font-weight: normal;
line-height: 1.2;
margin-right: 0.3125em;
margin-bottom: 0.3125em;
padding: 0.5em 0.6875em;
width: auto;
}
.button:active,
.button:focus,
.button:hover {
background-color: #005580;
border-color: #005580;
color: #ffffff;
text-decoration: none;
}
/**
* Errors
*/
.error {
border-color: red;
}
.error-message {
color: red;
font-size: 1rem;
margin-bottom: 15px;
}<form class="validate">
<div>
<input type="text" minlength="3" maxlength="40" name="name" placeholder="Enter name" required>
</div>
<div>
<input type="url" name="url" pattern="^(?:(?:https?|HTTPS?|ftp|FTP):\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-zA-Z\u00a1-\uffff0-9]-*)*[a-zA-Z\u00a1-\uffff0-9]+)(?:\.(?:[a-zA-Z\u00a1-\uffff0-9]-*)*[a-zA-Z\u00a1-\uffff0-9]+)*(?:\.(?:[a-zA-Z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})?(?:[/?#]\S*)?$"
placeholder="Enter url" required>
</div>
<input type="submit" class="button" value="Submit">
</form>
<br>
<form class="validate">
<div>
<input type="user" minlength="4" maxlength="40" id="user" placeholder="Enter user" required>
</div>
<div>
<input type="position" minlength="5" maxlength="50" id="position" placeholder="Enter position" required>
</div>
<input type="submit" class="button" value="Submit">
</form>
答案 2 :(得分：0)
它无法按预期工作的原因是，如果没有错误，可以通过调用来删除禁用状态
event.target.parentElement.parentElement.lastElementChild.removeAttribute('disabled');
但是如果出现错误，请不要添加属性disabled。
因此，如果您将name输入保留为空白，但添加例如http://example.com按钮已启用，因为URL触发了removeAttribute()函数。
正如mplungjan建议的那样，最好使用required属性。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？