Fiddle

Question

我有这个非常简单的表格来输入用户名并选择要上传的文件。用户名是必需的，但文件不是。它的样式，并具有在提交表单之前检查文件类型和大小的功能。如果您选择了错误的文件，该功能将起作用，并且将禁用提交按钮。如果您没有选择文件，则用户名验证将无法运行。如果您单击文本输入然后模糊它将变为红色但表单将提交。 JSFIDDLE

HTML

<form method="post" class="contact" onsubmit="return validate();" enctype="multipart/form-data">
        <table cellspacing="30">
            <tr>
                <td>
                    <label id="userlabel">user name</label>
                    <input type="text" id="user" name="username" onblur="checkUser()"></td>                  
            </tr>

            <tr>
                <td>
                    <div id="FileUpload">
                        <input type="file" size="4" id="BrowserHidden" 
onchange="getElementById('FileField').value = getElementById('BrowserHidden').value;" name="pic" />
                        <div id="BrowserVisible"><input type="text" id="FileField" /></div>
                    </div>
                </td>
                </tr>
                <tr>
                <td><input type="submit" name="send" id="save" value="send" /></td>
            </tr>
        </table>
    </form>

JS

function checkUser(){
    var userlen = $("#user").val().length;
    if(userlen<4){
        $("#userlabel").css("color","rgb(224, 19, 19)");
        return false;
    }
    else{
        $("#userlabel").css("color","#000");
        return true;
    }
}

$("#BrowserHidden").change(function (e) {
 var file = this.files[0];
 var name = file.name;
 var extension = name.substr((name.lastIndexOf('.') + 1));
 var str = 'doc,docx,pdf';
 if (str.indexOf(extension) > -1) {
 console.log('y');
 size = file.size;
 console.log(size);
 if (size > 10000000) {
 alert('file size is larger than 10 MB');
 $("#save").attr("disabled", "disabled");
 return false;
 }
 else {
 $("#save").removeAttr("disabled");
 return true;
 }
 }
 else {
 alert('file type is not allowed');
 $("#save").attr("disabled", "disabled");
 return false;
 }
 });

 function validate(){
    $.each($('form :input'),function(){
        $(this).blur().change();
    });
    if(!checkUser() ){
        return false;
    }
    else{
        return true;
    }
}

Answer 1

这就是你如何使它发挥作用：

将您的提交按钮更改为普通按钮并向其添加onclick属性
从onsubmit代码

form

validate()

将您的checkUser()功能更改为提交表单
就是这样！

Fiddle

希望对你有用！

表单验证问题，包括输入文件

1 个答案:

Fiddle