0

HTML Form 入力テキスト フィールドと選択タグが含まれています。jQueryこれらの入力フィールドと選択が空でないことを確認しますが、そのうちの 1 つが空の場合、その空のフィールドの横にエラー メッセージが表示され、うまく機能しますが、入力フィールドが空の場合に入力すると、エラーメッセージが削除されないという私の問題、

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 に答える