0

空でない入力フィールドを検証するためのこの簡単なスクリプトを作成しました。

たとえば、フォームが送信され、IDが「name」の入力が空の場合、その要素の横に短いメッセージが表示されます。問題は、フォームがもう一度送信され、その入力が空でなくなった場合、これを行う $(element).nextAll().remove()と、IDが「phone」の要素が消えてしまうことです。

メッセージエラーを削除するだけで、他のすべての要素を削除する必要はありません。

その問題を解決するための短くて簡単な方法を提案してください。

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#formu").submit(function(){
                     validateInputText($("#name"),"Enter you name");
                     validateInputText($("#phone"),"Enter your phone number");    
                     return false;                
                });
                function validateInputText(inputText, errorMessage){
                    if($(inputText).val()==''){
                        setFieldAsNotValid(inputText, errorMessage)
                    }else{
                        removeErrorMessage(inputText)
                    }
                }

                function setFieldAsNotValid(element, errorMessage){
                    $(element).nextAll().remove();
                    $(element).after('<b>'+errorMessage+'</b>')
                    $(element).addClass('selected');
                }

                function removeErrorMessage(element){
                    $(element).nextAll().remove();
                    $(element).removeClass('selected');
                }       
            });



        </script>
    </head> 
    <body>
       <form id="formu">
           name: <input type="text" id="name" />
           phone: <input type="text" id="phone" />
           <input type="hidden">
           <input type="submit">
        </form>
    </body>

</html>
4

3 に答える 3

2

エラーメッセージにクラスを付けてみませんか？例えば：

<b class="error">Message here</b>
<p class="error">Message here</p>

次に、呼び出したエラーメッセージを削除します

$('.error').remove();
于 2012-08-04T02:26:32.130 に答える
1

私はあなたのためにいくつかのコードを作成しました。それはあなたの質問に対する直接の答えではありませんが、あなたがやりたいことをするためのより良い方法だと思います。

HTML：

<form id="myForm">
    Name: <input id="name" type="text" allowblank="false" max="10"/><span for="name" class="errorMessage"></span>
    <br/>
    Age: <input id="age" type="text" allowblank="false"/><span for="age" class="errorMessage"></span>
    <br/>
    <input type="submit" value="Save"/>
</form>

CSS：

.error {
    border-color: #ff0000;
}

.errorMessage {
    color: #ff0000;
}

JavaScript：

$( "#myForm" ).submit(function(){
    return validate( $(this) );
});

function validate( $form ) {

    var isValid = true;

    $textInputs = $form.find( "input[type=text]" );
    $textInputs.each(function( index, item ){

        var isThisValid = true;
        var $item = $(item);
        var $errorSpan = $( "span[for=" + $item.attr("id") + "]" );

        var max = parseInt( $item.attr( "max" ) );

        if ( $item.attr( "allowblank" ) == "false" ) {
            if ( $item.val().trim() == "" ) {
                $item.addClass( "error" );
                $errorSpan.html( "this field cannot be empty" );
                isThisValid = false;
            }
        }

        if ( max && isThisValid ) {
            if ( $item.val().trim().length > max ) {
                $item.addClass( "error" );
                $errorSpan.html( "the maximum length of this field is " + max );
                isThisValid = false;
            }
        }

        if ( isThisValid ) {
            $item.removeClass( "error" );
            $errorSpan.html( "" );
        }

        if ( isValid && !isThisValid ) {
            isValid = false;
        }

    });

    return isValid;

}

このコードを使用すると、検証を改善して、新しいルールを作成できます。その仕事をするjQueryプラグインがいくつかありますが、jQueryのプラグインサイトはメンテナンス中であるため、このアプローチを使用できると思います。検証タイプを設定するためにいくつかのカスタム属性を使用したことに注意してください。ただし、検証制約を含むオブジェクトを作成する場合は、別のアプローチを使用できます。maxlengthは有効な入力タグ属性であるため、maxlengthの代わりに「max」を使用しました。とにかく、jsFiddleはここにあります：http：//jsfiddle.net/davidbuzatto/2N4yY/

于 2012-08-04T03:55:22.113 に答える
0

最善の解決策ではないかもしれませんが、現在は機能しています...エラーメッセージの入力要素の横にdiv要素を追加したので、次の要素がdivであるかどうかを確認して削除します...

function setFieldAsNotValid(element, errorMessage){
    if ($(element).next('div').length){
        $(element).next().remove();
    }
    $(element).after('<div style="margin-left:0px;"><b>'+errorMessage+'</b></div>')
    $(element).addClass('selected');
}

function removeErrorMessage(element){
    $(element).next().remove();
    $(element).removeClass('selected');
}
于 2012-08-04T03:19:14.383 に答える