Question

我有样本表格。

<form id="test_frm" name="test_frm" class="form" method="post">
        <fieldset data-pattern="stripes">
            <div>
                <label class="req"><i>*</i> Location</label>
                <div class='form-search-dropdown'>
                    <input type='text' class='form-search-field' name='' value=''><i class='form-icon dropdown'></i>
                    <ul id="sub_maintenance_locations">
                        {foreach from=$locations item="location"}
                            <li val="{$location->getId()}">{$location->getName()}</li>
                        {/foreach}
                    </ul>
                    <input type='hidden' class='dropdown-val' id="location_id" name='sub_maintenance_template[{$sub_maintenance_template_count}][location_id]' value=''>
                </div>

            </div>
            <div>
                <label class="req"><i>*</i> Problem</label>
                <div class='form-search-dropdown'>
                    <input type='text' class='form-search-field' name='' value=''><i class='form-icon dropdown'></i>
                    <ul id="problems">
                        {foreach from=$problems item="problem"}
                            <li val="{$problem->getId()}">{$problem->getName()}</li>
                        {/foreach}
                    </ul>
                    <input type='hidden' class='dropdown-val' id="problem_id" name='sub_maintenance_template[{$sub_maintenance_template_count}][problem_id]' value=''>
                </div>

            </div>

            <div>
                <label class="req"><i>*</i> Description</label>
                <textarea class="form-textarea" id="sub_task_description" name="sub_maintenance_template[{$sub_maintenance_template_count}][description]" style="height:120px;"></textarea>
                <i class="help"></i>
            </div>

            <div class="form-submit-container">
                <div class="pad">
                    <input type="button" class="form-submit js-create-subtask" value="Create Sub-task">
                    <span>or <a>Cancel</a></span>
                </div>
            </div>

        </fieldset>
    </form>

我试图在不进行服务器调用的情况下对表单进行vallllid。

验证码会像这样 -

$(document).off( 'click', '.js-create-subtask' ).on('click', '.js-create-subtask', function(e) {
        e.preventDefault();
        boolIsValid = true;

        $('.js-no-subtasks').hide();
        $('#error_div .error').text('');

        if( '' == $('#maintenance_location_id').val() || '' == $('#maintenance_problem_id').val() || '' == $('#days_to_complete').val() ){
            $('#error_div .error').append('<i></i> Location is required. Problem is required. Days to complete is required.');
            $('#error_div .error').show();
            boolIsValid = false;
        } else if ( '' == $('#maintenance_problem_id').val() ){
            $('#error_div .error').append('<i></i> Problem is required.');
            $('#error_div .error').show();
            boolIsValid = false;
        } else if( '' == $('#days_to_complete').val() ){
            $('#error_div .error').append(' <i></i> Days to complete is required.');
            $('#error_div .error').show();
            boolIsValid = false;
        } else if( '' == $('#sub_task_description').val() ){
            $('#error_div .error').append(' <i></i> Description is required.');
            $('#error_div .error').show();
            boolIsValid = false;
        }

        if( true == boolIsValid ) {
            // if everything is fine.
        }
    });

每当我尝试空白值时，它首次显示正确的验证。但是从下拉列表中选择位置之后仍然会给我验证位置是必需的。（如果因为问题和未输入的天数，则为第1个。）如果没有嵌套的情况，是否有任何方法可以获得验证消息？

预期结果：

如果用户没有输入位置，问题，天数没有完成＆amp; 描述它应该首先执行如果情况。
如果用户已选中位置只应显示剩余的错误消息＆amp;反之亦然。

Answer 1

您的第一个if语句应该使用&&而不是||，否则只要您丢失一个字段，它就会始终显示第一条消息。

if( '' == $('#maintenance_location_id').val() && '' == $('#maintenance_problem_id').val() && '' == $('#days_to_complete').val() ){}

Answer 2

当至少其中一个条件为时，

if( '' == $('#maintenance_location_id').val() || '' == $('#maintenance_problem_id').val() || '' == $('#days_to_complete').val() )将成立，因此您已经选择了维护位置并不重要，只要其他两个选项尚未被选中已选择，if将true且不会运行其他条件，因为它们的格式为else if。

这就是为什么：但是从下拉列表中选择位置后仍然需要验证位置。

关于您的预期结果，您需要{2} = 8种情况的if-else结构，并为每个结果显示一条消息。

这仅考虑#maintenance_location_id，#maintenance_problem_id和#days_to_complete，而不考虑#sub_task_description中未包含的if。

false false false  
false false true  
false true false  
true false false  
false true true 
true false true 
true true false  
true true true

我会把那一点留给你:)。希望它有所帮助

jquery表单验证多条消息

2 个答案: