Search jQuery

jQuery Forum

Email regex not validating properly after first validation

in Using jQuery • 8 years ago

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();
}
});
});

Replies(7)

Sµßhrånil∂

Re: Email regex not validating properly after first validation

8 years ago

are you using email filed as type="email" ? its looking like so as you said browser is highlighting with red border. It only happens when you use specific input type like number, email etc then browser automatically validate those before form submission and if those fields value are not as per type then it restrict form submission

If you use type="email" then when you have wrong email format that time browser's own validation method get invoked and restrict your form from submission. Though your form not get submitted, your javascript doesn't get called as you use submit handller, so if form doesn't get submitted then no call will be made to the code written for submit event handler.

You can see your same js code is working here when i have email field type as text http://jsfiddle.net/vz8m8a5p/

But same js code not working when i make email input field as type email http://jsfiddle.net/vz8m8a5p/1/

axdskhmd

Re: Email regex not validating properly after first validation

8 years ago

That's a brilliant catch, thank you! Changed all the input to text. Seems HTML5 input types give food for thought! Just got to get my head around only allowing letters, numbers and apostrophes, dashes and dots. *dips head back into regex hell*

axdskhmd

Re: Email regex not validating properly after first validation

8 years ago

Hi again,

Apologies for replying on the same thread, but this question is related to the code above so I didn't want to duplicate the thread.

In the //Check Name code block above, I only want my users to be able to enter letters (upper and lower case) along with apostrophes, hyphens and dots.

Unfortunately it seems no matter what I do, when I enter any other character, my form doesn't display the error.

It just lets me enter anything regardless of the regex check.

I've been chatting with a developer (who has very limited time for my questions) and not even he can make it work, can't even escape backslashes. He said I'd be better using replace() to remove them from the field.

Guess what, this doesn't work either! I've tried the following. I'm about to run off to a hot country at this point, I've been at it all afternoon!

//Check Name
else if ($(this).attr('id') == 'name') {
$(this).val().trim().replace(/[!"#$%&'()*+,.\/:;<=>?@[\\\]^`{|}~]/g, "\\\\$&");
// this doesn't work either - $(this).val().trim().replace(/¬`!"£$%^&*()_+={}[]:;@~#|\<>,?//g, '');
if ($(this).val().trim().length < 2 || $(this).val().trim().length > 80) {
$(this).stopForm();
$(this).next('.error').html('Please enter a valid name $more than 1 letter - letters, apostrophies, dashes and dots only$.');
}
else {
$(this).next('.error').remove();
event.preventDefault();
}

Sµßhrånil∂

Re: Email regex not validating properly after first validation

8 years ago

Your regex has problem

You can use it like !$(this).val().match(/^[A-Za-z'-\.]$/))

Also i saw you want name to be at least 1 character and upto 80 characters, for that also you can do it with same regex and you don't need to do it by checking length like

!$(this).val().match(/^[A-Za-z'-\.]{1,80}$/))

Above regex will make sure name consists letters in both case and 3 special charters with length 1 to 80

See here http://jsfiddle.net/vz8m8a5p/2/

NOTE: trim() doesn't works like chaining. You need to pass the value to trim() function as parameter to trim it

$(this).val().trim() should be $.trim($(this).val())

axdskhmd

Re: Email regex not validating properly after first validation

8 years ago

That's very kind of you to help me further, I appreciate the time you've taken with me.

I tested the new regex on the fiddle, it still allows these characters through:

*()+,

Ideally these should not be allowed either but it's fine if they have to be allowed.

Thank you again!

kbwood.au

Re: Email regex not validating properly after first validation

8 years ago

I think the problem is the dash (- ) in the regex. Within [] that normally indicates a range. Put it first to have it only mean a dash:

!$(this).val().match(/^[ -'\. A-Za-z]{1,80}$/))

Sµßhrånil∂

Re: Email regex not validating properly after first validation

8 years ago

@Keith, you are correct when i started with dash then its treating as single character but when i put it in between two special characters then its treating as range.

$(this).val().match(/^[-'\.A-Za-z]{1,80}$/)) is perfect now.

http://jsfiddle.net/vz8m8a5p/3/

Top Reply

Response title

Attachments

jQuery Forum

Email regex not validating properly after first validation

Replies(7)

Re: Email regex not validating properly after first validation

Re: Email regex not validating properly after first validation

Re: Email regex not validating properly after first validation

Re: Email regex not validating properly after first validation

Re: Email regex not validating properly after first validation

Re: Email regex not validating properly after first validation

Re: Email regex not validating properly after first validation

Statistics

Tags

Actions