Hello,
I'm setting up some custom validation for a form (not using a plugin as I want to force myself to learn). But this problem is stumping me a little, I was wondering if you can help?
I have searched on this site but haven't been able to find a thread on this specific issue.
The email validation works first time. So if I leave the field empty, or enter a, or enter a@, or enter a@a it will show the error message specified.
Once I enter a valid email address, as expected the error message disappears.
This is where it gets funky. I then decide to make the email address invalid again by removing the @ symbol. I try to submit the form, expecting the error message to re-appear but it doesn't.
Instead, Opera adds a fuzzy border around the email input. So it's like the browser is still validating but my error message is not being displayed.
The same occurs if I make the email address invalid via the other methods listed above.
If I delete all the characters from the email input, I see the error message again until I enter a valid email address.
I've tried about 5 different email regexes and I get the same issue. Is it my code? Or the browser??
Thank you.
- $('form[name="myForm"]').submit(function(event) {
-
- $.fn.stopForm = function() {
- event.preventDefault();
- if ($(this).next('.error').length == 0) {
- $(this).after('<div class="error"></div>');
- }
- }
-
- $('.required').each(function() {
-
- //Check Subject
- if ($(this).attr('id') == 'subject' && $(this).val().length == 0) {
- $(this).stopForm();
- $(this).next('.error').html('Please select a subject.');
- }
-
- //Check Name
- else if ($(this).attr('id') == 'name' && !$(this).val().trim().match(/[A-z]|'|-|./)) {
- $(this).stopForm();
- $(this).next('.error').html('Please enter a valid name \(letters, apostrophies, dashes and dots only\).');
- }
-
- //Check Email
- else if ($(this).attr('id') == 'email' && !$(this).val().match(/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/)) {
- $(this).stopForm();
- $(this).next('.error').html('Please enter a valid email address.');
- }
-
- else {
- $(this).next('.error').remove();
- event.preventDefault();
- }
-
- });
- });