admin管理员组

文章数量:1431904

I am developing a simple form with two drop downs. The second drop down will be loaded once the first drop down is selected. And based on the second drop down selection, either file upload or text box will be appear. Once the submit button is clicked the file should be uploaded or file name should be get from the form.

But I am issue with the required field. I mean when I select the file name option from the 2nd drop down and give file name as input, and submit the form , it still asks for file to load (because I set both as required).

Can some one tell me how to set required dynamically??

My Code so for :

<!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>

I am developing a simple form with two drop downs. The second drop down will be loaded once the first drop down is selected. And based on the second drop down selection, either file upload or text box will be appear. Once the submit button is clicked the file should be uploaded or file name should be get from the form.

But I am issue with the required field. I mean when I select the file name option from the 2nd drop down and give file name as input, and submit the form , it still asks for file to load (because I set both as required).

Can some one tell me how to set required dynamically??

My Code so for :

<!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>
  • javascript
  • jquery
  • html
Share Improve this question asked Mar 14, 2015 at 2:06 user4565448user4565448
Add a ment  | 

2 Answers 2

Reset to default 3

This will show you how to add or remove "required" from an element:

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./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" />

I'd personally reend that you fallback your HTML Form Validation with some JS to ensure homogeneus behavior between browsers.

Check out this JSFiddle

I'm using jQuery Validation great plugin for that.

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');
        }
    });
});

本文标签： javascriptEnabling and disabling required field dynamicallyStack Overflow

版权声明：本文标题：javascript - Enabling and disabling required field dynamically - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745591857a2665247.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。