Question

我正在开发一个带有两个下拉菜单的简单表单。选择第一个下拉列表后，将加载第二个下拉列表。并根据第二个下拉选项，将显示文件上传或文本框。单击提交按钮后，应上传文件或从表单中获取文件名。

但我对必填字段有疑问。我的意思是当我从第二个下拉列表中选择文件名选项并将文件名作为输入并提交表单时，它仍然要求加载文件（因为我根据需要设置了这两个文件）。

有人可以告诉我如何动态设置吗？

我的代码是这样的：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sample Form</title>



<!-- jQuery -->
<script src="js/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>

<script>
    $(document).ready(function(e) {
        $('#data').change(function() {
            if ($(this).val() == 'inputfile') {
                $('#inputfile').show();
                $('#submitform').show();
                $('#fileName').hide();

            } else if ($(this).val() == 'serverdata') {
                $('#fileName').show();
                $('#submitform').show();
                $('#inputfile').hide();
            } else {
                $('#fileName').hide();
                $('#inputfile').hide();
                $('#submitform').hide();
            }

        });
    });

    function ChangeDropdowns() {

        $(".style-sub-1").show();
    }
</script>
</head>

<body>

    <div class="container">
        <div class="box">
            <form>
                <div class="ccms_form_element cfdiv_custom">

                    <div class="col-md-4">
                        <label for="inputType">Input Type</label>
                    </div>
                    <div class="col-md-8" style="font-size: 16pt;">
                        <select id="inputType" required name="inputType"
                            style="width: 500px" onChange="ChangeDropdowns();">
                            <option value="">Select Type : Type Of You Want to
                                Process</option>
                            <option value="text">Text</option>
                            <option value="genome">Numbers</option>
                            <option value="chacha">Special Characters</option>
                        </select>
                    </div>
                </div>


                <div class="style-sub-1" id="dataType" style="display: none;">
                    <div class="col-md-4">
                        <label for="inputType">Data Type</label>
                    </div>
                    <div class="col-md-8" style="font-size: 16pt;">
                        <select id="data" required name="data" style="width: 500px">
                            <option value="">Select Data Source : Where is your
                                Data?</option>
                            <option value="serverdata">Data is already in Server</option>
                            <option value="inputfile">Need to Upload the File</option>

                        </select>
                    </div>
                </div>


                    <div class="row" id="inputfile" style="display: none;">


                        <div class="col-md-4">
                            <label for="file">Input File</label>
                        </div>
                        <div class="col-md-8">
                            <input id="file" type="file"
                                style="font-family: Baskerville, 'Palatino Linotype', Palatino, 'Century Schoolbook L', 'Times New Roman', serif; font-size: 20pt; font-style: bold"
                                required>
                        </div>
                    </div>

                <div class="row" id="fileName" style="display: none;">

                    <div class="form-group">
                        <label for="exampleInputName2">File Name</label> <input
                            type="text" class="form-control" style="width: 400px"
                            id="exampleInputName2"
                            placeholder="Enter File Name with full path in the Server" required>
                    </div>
                </div>

                <div class="row" id="submitform" style="display: none;">
                    <input type="submit" id="btnSubmit" value="Submit"
                        class="btnSubmit" />
                </div>
            </form>
        </div>
    </div>

</body>

</html>

Answer 1

这将向您展示如何在元素中添加或删除“required”：

function toggleRequired(){
    var txt = $('#text1');
    
    
    //Remove the "required" attribute.
    txt.removeAttr("required");
    alert(txt[0].outerHTML);
    
    //Add the "required" attribute.
    txt.attr("required", "true");
    alert(txt[0].outerHTML);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text1" required />
<br />
<input type="button" id="btnToggleRequired" onclick="toggleRequired()" value="Toggle Required" />

Answer 2

我个人建议您使用某些JS来回退您的HTML表单验证，以确保浏览器之间的同质性行为。

查看此JSFiddle

我正在使用jQuery Validation伟大的插件。

jQuery(function($){
    $("#daform").validate({
        rules: {   
            dynamic_text1: {
                required: {
                    depends: function(){
                        return $("#daselect").val();
                    }
                }
            }
        },
        submitHandler: function(form){
            console.log('passed validation, now do form.submit() to actually send the form');
        }
    });
});

动态启用和禁用必填字段

2 个答案: