0

我有一个HTML Form 包含输入文本字段和选择标签。jQuery我确保这些输入字段和选择不为空，但如果其中一个为空，则会在该空字段旁边显示一条错误消息，它对我很有效，但是我的问题是，如果输入字段为空然后我填写它，错误消息不会删除，

jQuery代码

$(document).ready(function (){
    $("#aioForm").on('submit',function(e){
        var errorCount = 0;
        $('span.errorMessage').text('');
        $('#addIO select').each(function(){
            var $this = $(this);
            if(this.selectedIndex==0 ){
                var error = 'Please select a cell' ;
                $this.next('span').text(error);
                errorCount = errorCount + 1;   
            }
        });
        var input = $("#aioForm input").val();
        if(input==''){
            $("#aioForm input").next('span').text("fill the name please");
            errorCount= errorCount+1;
        }
        if(errorCount>0){
            e.preventDefault();
        }
        if(errorCount==0){
            $(this)[0].submit(); // submit form if no error
        }else
            return false;
    });
});

html代码

<div id="addIO">
    <form id="aioForm" method="POST" action="<?php echo URL; ?>InformationObject/addIO">
        <ul id="ioAddul">
            <li class="ioAddli">
                <p>
                    <label>Concept</label>
                    <select id="ConceptSelect"></select>
                    <span class="errorMessage"></span>
                </p>
                <p>
                    <label>Name</label>
                    <input type="text" id="aioConceptName" name="name"  />
                    <span class="errorMessage"></span>
                </p>
            </li>
            <li class="ioAddli">
                <p>
                    <label>Concepts</label>
                    <a href="#" class="smallLink" id="aioShowLink">Show Concepts</a>
                </p>
                <div id="ioAddRelatedConcepts">
                </div>
            </li>
            <li class="ioAddli" id="ioAddContents">
                <p><label>Contents</label></p>
                <p>
                    <label class="ioAddOneContent">write one info</label>
                    <input name="contents[]" type="text" class="longInput"/>
                    <span class="errorMessage"></span>
                    <a href="" class="smallLink" onclick="return ioAddNewContent(this)">new info</a>
                </p>
            </li>
            <li class="ioAddli"id="ioAddOtherRelation">
                <a href="" onclick="return ioAddSetOtherRelation(this)"class="smallLink">add other relation</a>
            </li>
            <li>
                <input type="submit" class="button1" value="save"/>
            </li>
        </ul>
    </form>
</div>

最重要的声明是这个

$('span.errorMessage').text('');

我用了它，它只适用于选择标签，而不适用于输入文本字段 的完整代码

4

2 回答 2

1

您需要对每个输入进行循环，在您的代码中，您只检查第一个输入，如果输入不为空，则需要清空范围替换

  var input = $("#aioForm input").val();
    if(input==''){
        $("#aioForm input").next('span').text("fill the name please");
        errorCount= errorCount+1;
    }

经过

 var inputs = $("#aioForm input");
            inputs.each(function(index, value) {
                var input = $(this).val();
                if(input==''){
                    $(this).next('span').text("fill the name please");
                    errorCount= errorCount+1;
                } else {
                    $(this).next('span').empty();
                }
            });

祝你好运

于 2012-05-19T09:04:35.917 回答
1

您可以简化代码，如下所示：

$(document).ready(function (){
    $("#aioForm").on('submit',function(e){
        var errorCount = 0;
        $('span.errorMessage').text('');
        // checkign for multiple select [now you have one]
        var select = $('#addIO select').filter(function(){
            return this.selectedIndex == 0;
        }).next('span').text('Please select a cell');
        // checking for inputs
        var input = $("#aioForm input[type=text]").filter(function() {
           return !this.value;
        }).next('span').text("fill the name please");
        // no error checking
        if(input.length==0 && select.length == 0){
            $(this)[0].submit(); // submit form if no error
        }
        e.preventDefault();
    });
});

演示

于 2012-05-19T09:19:12.887 回答