Question

Whats the best approach for jquery realtime validation checking?

Onsubmit the span with each label gets changed to for example:

enter your email | submit | email is not correct

but when you change the value again you have to submit again to remove the email is not correct message.

So im searching for a “realtime” error handling or something. What is the best approach to do this considering my code?

<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>

Answer 1

I’m not 100% sure I understand the question. Do you want to reset #emailInfo text when user corrects the input? If so, you can use either onchange, onkeypres or on focus events:

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

Better yet, you can do your validation on corresponding field change rather than on form submit.

The following example will validate email field on each key pressed:

$("#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('');
    }
});

You can validate other fields in a similar way. Or you can use jQuery Validation plugin.