jquery表单验证多条消息

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>

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

验证码将是这样的 -

$(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个。）有没有办法在没有嵌套的情况下获得验证消息？

预期结果 ：

• 如果用户没有输入位置，问题，天数没有完成和说明，如果是大小写，则应先执行。
• 如果用户只选择位置，则应显示剩余的错误消息，反之亦然。

Answer 1

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

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

Answer 2

当至少有一个条件是MET时，if( '' == $('#maintenance_location_id').val() || '' == $('#maintenance_problem_id').val() || '' == $('#days_to_complete').val() )将是真的，因此你选择一个维护位置并不重要，只要其他两个选择没有被选中，if将是true并且不会运行其他条件因为它们是else if的形式。

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

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

这只考虑#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

我会把那一点留给你:)。希望能帮助到你