我有一个带有输入类型和文件浏览的表单,只有当两者都有效时才需要启用他确认按钮(不是空文本和选择的一个文件)。 这是HTML代码:
<div class="modal-body">
<!-- form start -->
<div class="box-body">
<div class="form-group">
<label>Name</label>
<input id="name" type="text" class="form-control" maxlength="45" placeholder="Version name">
</div>
<div class="form-group">
<label>Note </label>(optional)
<textarea id="note" class="form-control" rows="4" maxlength="255"></textarea>
</div>
<div class="input-group">
<span class="input-group-btn"> <span
class="btn btn-primary btn-file" id="browseButton"> Browse… <input
id="versionFile" type="file" name="file" />
</span>
</span>
<input id="versionName" type="text" class="form-control" readonly="readonly">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<button id="uploadVersionButton" type="button" class="btn btn-primary">Upload version</button>
</div>
正如您所看到的,文件输入文本是只读的,我很难检查它。我想在选择文件时检查名称输入是否为空,但是
$('#versionName').bind('change',validate);
验证功能
function validate() {
if($('#name').val().length > 0) {
var fileControl = document.getElementById('versionFile');
if(fileControl.files.length === 0) {
$("#uploadVersionButton").prop("disabled", true);
notifyMessage("Your file is empty!", 'error');
} else {
$("#uploadVersionButton").prop("disabled", false);
}
} else {
notifyMessage("Please insert a name for the client version.", 'error');
$("#uploadVersionButton").prop("disabled", true);
}
}
不适用于只读字段。你有没有想过检查这两个领域?