We Keep Coding

Javascript feedforward validation

I'm facing a problem where I would like to give an user an immediate feedback that an input field already doesn't comply following a validation pattern and not after providing the whole value.
To give you an example:
UK postcode might look like this [SW1W 0NY] and I would like to inform the user that everything looks good so far when he enters [SW] but give him immediate feedback when he enters for example [1].
How would you approach this? Since UK postcode can be up to 7 numbers I don't want to create 7 regular expressions to check the postcode against based on the postcode length but rather have some 'feedforward' machanism.

The final validation could look like this:
/^[a-zA-Z]{1,2}[0-9]{1,2}[a-zA-Z]{0,1} ?[0-9][a-zA-Z]{2}$/
And for the partial validation I would try something like this:
^([a-zA-Z]{1,2}([0-9]{1,2}([a-zA-Z]{0,1}( ?([0-9]([a-zA-Z]{1,2})?)?)?)?)?)?$
all the parts are optional, just make sure, that even in the last part can be one or two chars.

Restrict input some personal information

I want to check what users type in Textarea.
Actually, how can I restrict typing phone numbers and e mail addresses in description box?
So for example:
Hi, I am selling a Bugatti Veyron
Age: 2010
Color: Black
You can contact me on 066/656-656 or 055646646
or via mail mesell#domain.com
If someone tries to enter something like this I want to automatically remove
personal contact details.
So, please help, how can I do it?

Use Regex and do something like this :
Here's an example (jsFiddle)
HTML
<textarea></textarea><br>
<button>Test</button><br>
<span class="result"></span>
Javascript:
function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
$('.result').html(re.test(email));
if(re.test(email)){
$('.result').html("Contain email");
} else {
$('.result').html("Do not contain email");
}
}
$('button').click(function(){
validateEmail($('textarea').val());
});
Note that I only look for email. But you can use other Regex to look for phone, you just have to search for something like "javascript regex phone" on Google.

you can try Regex as suggested, but take into consideration it's very hard to stop a phone number from being entered(unless you stop ALL numbers or know the exact form of the number taking place).
For example, stopping a xxx-xxxxxxx number is easy, but the user can type each digit with a space after it, which makes it much harder to stop(unless you again remove the option to type numbers.
As for emails, a simple regex to find a # followed by some text, a dot and 2 or 3 characters normally finds emails pretty easily. be advised people can still be creative in the way they put their emails(AT instead of # for example).
this should all be done server side, you can use javascript on the clientside to make it UI friendly.

For email validation:
<input type="email" name="email">
Here is an example: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_email
For Phone number validation:
use regex, it should be straight forward though.
Or just try isNAN(value) where value is the phone number enterd, will tell you if this is a number of not and then you can also put a check on number of digits.
Hope this helps!

Jquery Validator - Conditional Validations on a single field

I have a Forgot Password form where we have a single input field in which the user can put either the email or the phone number.
Now my validation should work on based on the user content. If the user puts an email, the email validation should run and if the user puts mobile number, the mobile number validation should run.
Can someone please help in such a scenario. Tried google-ing but could not find any such scenario.

var value=document.getElementById(id).value;
var email = /^[a-zA-Z\._-]+#[a-zA-Z\.-]+\.[a-z]{2,6}$/;
var phone = /^((\+){0,1}91(\s){0,1}(\-){0,1}(\s){0,1}){0,1}98(\s){0,1}(\-){0,1}(\s){0,1}[1-9]{1}[0-9]{7}$/;
if(email.test(value)) {
//email
} else if (phone.test(value)) {
//phone #
} else {
//invalid
}
Try that. Since the phone # regex is kinda complicated, use http://regexlib.com/ to find a simpler one.

You could write a regex that check if the input is a phone number / e-mail. But if the user inputs something wrong, you might have that regex fail. Here's a regex for phone numbers: example of a regular expression in jquery for phone numbers, if the input matches this regex, use the phone validation. If not, use the e-mail validation.

regular expression with if statements

I have this as my regular expression:
var email = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
And this is my if statement:
if($('#email').val() ==""){
$('#emailErrorMsg').text("Please enter a valid email address.");
}
else if(!email.test('#email')) {
$('#emailErrorMsg').text("OK");
}
else($('#emailErrorMsg').text("Please enter a valid email address."));
});
When I type in a valid email address it says "OK". However, if I enter just some text for example it still says "OK" when I want it to say "Please enter a valid email address". Anyone any idea. By the way, I'm still an amatuer at this stuff!

The main problem is that you have a ? at the end of the regex, following parentheses that enclose the entire pattern. This effectively makes the entire match optional, so the regex will literally match anything.
Note also that you are testing the literal string #email, not the value of the #email element. Make sure you pass the appropriate string to test().

I see that you have jquery tag, so take a look to JQuery validate plugin, it will be better than a simple regex.
But if you still want regex, see Validate email address in JavaScript?

Validating emails is hard. The fully correct regex is a true monstrosity that you can see (if you dare) at http://www.ex-parrot.com/~pdw/Mail-RFC822-Address.html which probably isn't what you want.
Instead, you have a few options. Use a regex that matches 99% of emails, do it server side with an email validation library, or implement a finite state machine to parse it correctly. The state machine is probably too bulky (although allows neat stuff like suggestions for possible typos) and doing it all server side -- which you better be doing anyway (what if someone has JavaScript disabled?) -- loses the benefits of as-you-type checking.
That leaves a simpler regex that doesn't match all legal emails, but matches enough that the chances of someone registering with one that it doesn't are really slim.
The regex from Validate email address in JavaScript? should do the trick pretty well:
/^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\
".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA
-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
Also, you made a small typo:
else if(!email.test('#email')) {
$('#emailErrorMsg').text("OK");
}
is testing against the string '#email' -- not the element with the ID 'email'. Change that to:
else if(!email.test($('#email').val())) {
$('#emailErrorMsg').text("OK");
}

There's a little typo in your regex. Try this:
var email = /^([\w-\.]+)#([\w-]+\.)+[\w-]{2,6}?$/;
That should also handle the .museum case

Checking input values for special symbols

I am having two text fields in my form. The data to be entered in the field are Name and City respectively. I want to check that the user has not entered any special symbols like !,#,#........ i.e, the only thing user should enter must be belonging to a-z,A-Z, though the user can enter Underscore(_), but no numbers, no special symbols.
I want to check this using JavaScript, how can this be achieved.
Thanks in advance.

A classic problem that's usually solved with the help of regular expressions.
var myString = "London";
if (myString.match(/^[a-zA-Z_]+$/)) {
// Success
}
If you want to allow spaces, like for New York, change the pattern to /^[a-zA-Z_\s]+$/.