隐藏多重复选框/输入字段的验证

时间:2017-06-20 19:27:32

标签: javascript jquery forms validation checkbox

为了处理具有多个可选复选框的字段的验证,我使用了webshims polyfill。

表单中有隐藏/取消隐藏表单部分的复选框。

初始任务是仅在隐藏的部分可见时验证/要求它们。

我最初的想法是使用webshims polyfill的功能,只有在选中与显示该字段相关联的复选框时才需要隐藏字段。

问题#1: 一些隐藏的部分包括需要验证的这些多复选框类型字段。如何让这些字段使用webshims'数据grouprequired =""功能,所以我可以验证这些多复选框字段?

问题#2: 有一个隐藏部分(注册表/ id = div3)有5个输入文本字段 - 最终用户只需要填写其中至少一个这些字段。我如何做到这一点,当这个隐藏的部分变得可见时,为了验证表格,只需要5个字段中的至少一个?

或者,如果有更好的解决方案,我很乐意学习。我对此很陌生。

以下是表单中的相关代码:

   <script>
     webshim.setOptions('forms', {
        lazyCustomMessages: true,
        addValidators: true
    });

    webshim.polyfill('forms forms-ext');
    </script>

    <script>
    function addTableRow() {
        var $tableRow = $('tr.model-row:first-child');
        var $clonedRow = $tableRow.clone().show();
        $('#stmember').append($clonedRow);
        }

    function myDeleteFunction() {
        var $memberTRs = $('tr', '#stmember');
        // If rowcount === 1, hide first row, don't remove it!!
        var rowCount = $memberTRs.length;
        if (rowCount === 1) {
            $('tr.model-row:first-child').hide();
            return;
        }
        $memberTRs.last().remove();
        }

        jQuery(function() {

        $('#delete').click(function() {
            myDeleteFunction();
        });

        $('#add').click(function() {
            addTableRow();
        });

    });
    </script>

    <script type="text/javascript">
    function showMe (it, box) {
        var vis = (box.checked) ? "block" : "none";
        document.getElementById(it).style.display = vis;
    }
    </script>
<body>
<form method="post" action="mailto:you@example.com" enctype="text/plain">
    <div class="row 50%">
        <div class="12u">
        Which of the following would you like to do with your specified patient population? Check all that apply.<br />
            <ul class="list">
                <li><input type="checkbox" id="recruit" name="todo" value="1" data-grouprequired="" onclick="showMe('div1', this)"> Recruitment for research</li>
                <li><input type="checkbox" id="edc" name="todo" value="2" onclick="showMe('div2', this)"> Electronic Data Capture</li>
                <li><input type="checkbox" id="registry" name="todo" value="3" onclick="showMe('div3', this)"> Registry</li>
                <li><input type="checkbox" id="dextract" name="todo" value="4" onclick="showMe('div4', this)"> Data Extraction</li> 
                <li><input type="checkbox" id="ptpop" name="todo" value="5">Estimate of number of patients in target population</li>    
            </ul>
        </div>
    </div>
<div id="div1" style="display:none">
    <div class="row 50%">
        <div class="12u">
            <h3><strong>Recruitment</strong></h3>
            What methods would you like to use for patient recruitment? Check all that apply.<br />
                <ul class="list">
                    <li><input type="checkbox" name="vehicle" value="Bike"> Patient Notification Through MyChart</li>
                    <li><input type="checkbox" name="vehicle" value="Car"> Study Team Member Notification When Appropriate Patient Checks In</li>
                    <li><input type="checkbox" name="vehicle" value="Car"> Provider Notification During Patient Encounter</li>
                </ul>
            </div>
        </div>  
    </div>      
    <div id="div2" style="display:none">
        <h3><strong>Electronic Data Capture</strong></h3>
        <div class="row 50%">
            <div class="6u 12u (mobile)">
            How would you like to capture data on your patient population? Check all that apply.<br />
            <ul class="list" style="margin-bottom: 0px; padding-bottom: 0px;">
                <li><input type="checkbox" name="vehicle" value="Bike"> Patient entry through MyChart</li>
                <li><input type="checkbox" name="vehicle" value="Car"> Patient entry through Welcome</li>
                <li><input type="checkbox" name="vehicle" value="Car"> Patient entry through REDCap</li>
                <li><input type="checkbox" name="vehicle" value="Car"> Clinician entry through EPIC</li>    
                <li><input type="checkbox" name="vehicle" value="Car"> Clinician entry through REDCap</li>
                <li><input type="checkbox" name="vehicle" value="Car"> MHi-GO (Mobile Application)</li> 
            </ul>
        </div>
        <div class="6u 12u(mobile)">
        Where would you like the data delivered to? (Server name, share name, or JHBox, Enterprise NAS, etc.)
            <input name="subname" type="text" data-dependent-validation='{"from": "edc", "prop": "required"}' />
        </div>
    </div>
    <div class="row 50%">
        <div class="6u 12u(mobile)">
        In what format would you like to receive your data? (Excel, pipe-delimited, CSV, SQL tables)
            <input name="subjhed" type="text" data-dependent-validation='{"from": "edc", "prop": "required"}' />
        </div>
        <div class="6u 12u(mobile)">
        Would you like the data visualized and if so how? (Graphs, tables, diagrams, other)
            <input name="subemail" type="text" data-dependent-validation='{"from": "edc", "prop": "required"}' />
        </div>
    </div>
</div>
<div id="div3" style="display:none">
    <div class="row 50%">
    <h3><strong>Registries</strong></h3>
    </div>
    <h3 class="quest-header"><strong>What information and/or metrics of your patient population would you like to track over time?</strong></h3>
    Please specify if applicable:
    <div class="row 50%">
            <div class="6u 12u(mobile)">
            Diagnoses:
                <input name="subjhed" type="text" />
            </div>
            <div class="6u 12u(mobile)">
            Problem List:
                <input name="subemail" type="text" />
            </div>
        </div>
        <div class="row 50%">
            <div class="6u 12u(mobile)">
            Medications:
                <input name="subjhed" type="text" />
            </div>
            <div class="6u 12u(mobile)">
            Labs:
                <input name="subemail" type="text" />
            </div>
        </div>
        <div class="row 50%">   
            <div class="6u 12u(mobile)">
            Other:
                <input name="subjhed" type="text" />
            </div>
        </div>  
    </div>
    <div id="div4" style="display:none">
        <div class="row 50%">
            <div class="12u">
            <h3><strong>Data Extraction</strong></h3>
            What data would you like to extract?
            <textarea name="description" data-dependent-validation='{"from": "dextract", "prop": "required"}' ></textarea>
            </div>
        </div>
        <div class="row 50%">
            <div class="6u 12u(mobile)">
            Where would you like the data delivered to? (Server name, share name, or JHBox, Enterprise NAS, etc.)
                <input name="subemail" type="text" data-dependent-validation='{"from": "dextract", "prop": "required"}' />
            </div>
            <div class="6u 12u(mobile)">
            In what format would you like to receive your data? (Excel, pipe-delimited, CSV, SQL tables)
                <input name="subjhed" type="text" data-dependent-validation='{"from": "dextract", "prop": "required"}' />
            </div>
        </div>
    </div
        <div class="row 50%">
            <div class="12u">
            <center>
                <ul class="actions">
                    <li><input type="submit" value="Submit Request" /></li>
                    <li><input type="submit" value="Save & Continue Later" /></li>
                    <li><input type="reset" value="Clear form" /></li>
                </ul>
            </center>
            </div>
       </div>
  </form>

1 个答案:

答案 0 :(得分:0)

最终自己想出来了。禁用所有隐藏的字段。让他们变得可见变得可见。对于多个文本字段,能够使用来自webshims polyfill的data-group,但必须创建自定义错误消息。