0

jqueryリアルタイム検証チェックの最良のアプローチは何ですか?

各ラベルのスパンを送信すると、たとえば次のように変更されます。

メールアドレスを入力 | 送信 | メールが正しくありません

ただし、値を再度変更すると、電子メールを削除するために再度送信する必要があり、メッセージが正しくありません。

だから、「リアルタイム」のエラー処理か何かを探しています。私のコードを考慮してこれを行うための最良のアプローチは何ですか?

<script type="text/javascript">
    $(document).ready(function()
    {
        $('form #status').hide();
        $('#submit').click(function(e) {
            e.preventDefault();

            var valid = '';
            var required = 'is required';
            var name = $('form #name').val();
            var subject = $('form #subject').val();
            var email = $('form #email').val();
            var message = $('form #message').val();
            var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;

            //error checking
            if (name == '' || name.length <= 2)
            {
                valid = '<p>your name' + required + '</p>';
                $('form #nameInfo').text('Name can not contain 2 characters or less!');
            }

            if(!filter.test(email)){
                valid += '<p>Your email'+ required +'</p>';
                $('form #emailInfo').text('Email addres is not valid');
            }

            if (message == '' || message.length <= 5)
            {
                valid += '<p>A message' + required +'</p>';
                $('form #messageInfo').text('Message must be over 20 chars');
            }

            if (valid != '')
            {
                $('form #status').removeClass().addClass('error')
                        .html('<strong>Please correct errors belown </strong>' + valid).fadeIn('fast')
            }
            else
            {
                $('form #status').removeClass().addClass('processing').html('Processing...').fadeIn('fast');
                var formData = $('form').serialize();
                submitForm(formData);
            }

        });
    });
    </script>
4

1 に答える 1

0

質問を100%理解しているとは言えません。#emailInfoユーザーが入力を修正したときにテキストをリセットしますか? その場合はonchange、onkeypresまたはfocusイベントで次のいずれかを使用できます。

$("#email").change(function(){
    $("#nameInfo").text("Enter your email");
});

さらに良いことchangeに、フォームではなく対応するフィールドで検証を行うことができますsubmit。

次の例では、押されたキーごとに電子メール フィールドを検証します。

$("#email").keypress(function(){
    var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
    var email = $('#email').val();

    if(!filter.test(email)){
        $('#emailInfo').text('Email addres is not valid');
    } else {
        $('#emailInfo').text('');
    }
});

同様の方法で他のフィールドを検証できます。または、jQuery Validationプラグインを使用できます。

于 2012-09-14T03:54:18.267 に答える