replace span text (error) after retyping vars jquery javascript

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>

Ilia Frenkel · Accepted Answer · 2012-09-14T04:12:12.313

0

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.

edited Sep 14 '12 at 04:12

answered Sep 14 '12 at 03:54

Ilia Frenkel

1,969
13
19

I meant real time validation checking. edited the question sorry – r2get Sep 14 '12 at 03:59
When you fill in a email sometimes you can choose from a dropdown depends on wich browser. Or sometimes you ctrl+v it in. altough it not happens that much I still want to figure out how to change it in those situations. If I paste something or select it from a dropdown it doesnt work. aiming for perfection :P – r2get Sep 14 '12 at 04:27
You can use `input` event. It doesn't work in IE8 and lower though. Look here for more details: http://stackoverflow.com/questions/6458840/on-input-change-event – Ilia Frenkel Sep 14 '12 at 04:36

replace span text (error) after retyping vars jquery javascript

1 Answers1