英文:
button not disabling , when error=true then also
问题
我已经添加了 JavaScript 代码，应该在出现错误时禁用按钮以防止表单提交，我可以看到错误，但按钮没有禁用，而且它仍然提交了表单。
在 console.log 中，我也可以看到 true。
$(function() {
$('#homePage').parsley();
$('#image').on('change', function() {
validateImage(this);
});
});
function validateImage(input) {
var file = input.files[0];
var fileType = file.type.toLowerCase();
var fileSize = file.size;
var fileSizeInMB = fileSize / (1024 * 1024);
var error = false;
if (fileType.indexOf('image') === -1) {
$(input).parsley().addError('custom', {
message: '请选择一个图片文件。',
updateClass: true
});
$(input).focus();
error = true;
} else if (fileSizeInMB > 3) {
input.value = '';
$(input).parsley().addError('custom', {
message: '文件大小应小于3 KB。',
updateClass: true
});
$(input).focus();
error = true;
} else {
$(input).parsley().reset();
}
console.log(error);
if (error === true) {
$('input[type="submit"]').prop('disabled', true);
} else {
$('input[type="submit"]').prop('disabled', false);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.2/parsley.min.js"></script>
<button type="submit" name="submit" id="submit" class="btn btn-primary">更新</button>
英文:
I have added javascript code that should disable button when there is error for preventing form submission ,
I can see the error but button is not disabling and it's submitting the form ,
In the console.log i can see true also
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(function() {
$('#homePage').parsley();
$('#image').on('change', function() {
validateImage(this);
});
});
function validateImage(input) {
var file = input.files[0];
var fileType = file.type.toLowerCase();
var fileSize = file.size;
var fileSizeInMB = fileSize / (1024 * 1024);
var error = false;
if (fileType.indexOf('image') === -1) {
$(input).parsley().addError('custom', {
message: 'Please select an image file.',
updateClass: true
});
$(input).focus();
error = true;
} else if (fileSizeInMB > 3) {
input.value = '';
$(input).parsley().addError('custom', {
message: 'File size should be less than 3 KB.',
updateClass: true
});
$(input).focus();
error = true;
} else {
$(input).parsley().reset();
}
console.log(error);
if (error === true) {
$('input[type="submit"]').prop('disabled', true);
} else {
$('input[type="submit"]').prop('disabled', false);
}
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.2/parsley.min.js"></script>
<button type="submit" name="submit" id="submit" class="btn btn-primary">Update</button>
<!-- end snippet -->
答案1
得分: 1
请使用以下代码，它将有效：
<!DOCTYPE html>
<html>
<head>
<title>示例</title>
</head>
<body>
<button type="submit" name="submit" id="submit" class="btn btn-primary">更新</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script>
$(function() {
$('#homePage').parsley();
$('#image').on('change', function() {
validateImage(this);
});
});
function validateImage(input) {
var file = input.files[0];
var fileType = file.type.toLowerCase();
var fileSize = file.size;
var fileSizeInMB = fileSize / (1024 * 1024);
var error = false;
if (fileType.indexOf('image') === -1) {
$(input).parsley().addError('custom', { message: '请选择一个图像文件。', updateClass: true });
$(input).focus();
error = true;
} else if (fileSizeInMB > 3) {
input.value = '';
$(input).parsley().addError('custom', { message: '文件大小应小于3 KB。', updateClass: true });
$(input).focus();
error = true;
} else {
$(input).parsley().reset();
}
console.log(error);
if (error === true) {
$('#submit').prop('disabled', true); // 修正的选择器
} else {
$('#submit').prop('disabled', false); // 修正的选择器
}
}
</script>
</body>
</html>
不包括代码部分的翻译。
英文:
Hi,
Please use this code it will work
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<button type="submit" name="submit" id="submit" class="btn btn-primary">Update</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script>
$(function() {
$('#homePage').parsley();
$('#image').on('change', function() {
validateImage(this);
});
});
function validateImage(input) {
var file = input.files[0];
var fileType = file.type.toLowerCase();
var fileSize = file.size;
var fileSizeInMB = fileSize / (1024 * 1024);
var error = false;
if (fileType.indexOf('image') === -1) {
$(input).parsley().addError('custom', { message: 'Please select an image file.', updateClass: true });
$(input).focus();
error = true;
} else if (fileSizeInMB > 3) {
input.value = '';
$(input).parsley().addError('custom', { message: 'File size should be less than 3 KB.', updateClass: true });
$(input).focus();
error = true;
} else {
$(input).parsley().reset();
}
console.log(error);
if (error === true) {
$('#submit').prop('disabled', true); // Corrected selector
} else {
$('#submit').prop('disabled', false); // Corrected selector
}
}
</script>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论