Validate email address in JavaScript

Validate email address in JavaScript - javascript

Here is my issue: I'm trying to validate an email in the textbox with asp:RegularExpressionValidator, See the below:
<telerik:RadTextBox ID="AlertMissedEmail" Width="300" runat="server" Label="" MaxLength="500" TextMode="MultiLine"></telerik:RadTextBox>
<asp:RegularExpressionValidator runat="server" ID="revEmail" ControlToValidate="AlertMissedEmail"
Display="None" ValidationExpression="^([\w+-.%]+#[\w-.]+\.[A-Za-z]{2,4},?)+$"
ValidationGroup="validationTourProperties" EnableClientScript="false"
ErrorMessage="- Please enter a valid email address:(ex.) <b>john#gmail.com</b>" />
It works just fine if its one email but I want to let the user add multiple emails that can only be separated with semicolon
I want first to check it up in JS so if the user inserted space or something else instead of semicolon the user will get an alert with the correct format how it should be inserted so he can fix the emails.
Please help me fix my JS Code:
function formCheck(sender,args)
{
//Getting the Email field value & text.
var l_Email = $find("<%=AlertMissedEmail.ClientID %>").get_value();
var l_EmailText = $find("<%=AlertMissedEmail.ClientID %>").get_textBoxValue();
//Setting up the Reg expression for email.
var reg = /^\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
// 3). Check for reg expression of the email field.
if (l_EmailText == "") { // text is empty email is not must.
retValEmail = true;
}
if (l_EmailText != "") { // email is not empty check for reg
if (reg.test(l_Email)) {
retValEmail = true;
}
else {
alert("Please enter a valid email address");
retValEmail = false;
}
}
}

I modified you function a bit. This is not tested.
Hope it helps...
function formCheck(sender,args)
{
//Getting the Email field value & text.
var l_Email = $find("<%=AlertMissedEmail.ClientID %>").get_value();
var l_EmailText = $find("<%=AlertMissedEmail.ClientID %>").get_textBoxValue();
//Setting up the Reg expression for email.
var reg = /^\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var hasInvalidMail = false;
if (l_EmailText.length < 7) { // valid email to have 7 chars at least
return false;
}
//split emails if there is ;
var emails = [];
if(l_EmailText.indexOf(';') >= 0)
{
emails = l_EmailText.split(';');
}
else
{
emails[0] = l_EmailText;
}
//loop all emails
for(var i=0; i<emails.length;i++)
{
if (!reg.test(l_Email)) {
//stop checking if we find error
hasInvalidMail = true;
break;
}
}
return hasInvalidMail;
}
You can make some enhancement to return only the valid emails

I'm assuming that most of the code you posted works. I think you just need to check out something like the split() function. As soon as you get l_EmailText you could call:
var emails = l_EmailText.split(";");
to break up each of the emails and then iterate:
for (var i = 0; i < emails.length; i++) {
// individual email check code goes here
}
to check each email individually. Your regex expression /^\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*$/; only appears to work for one email.

Related

How can I validate user input (characters and number) with javascript?

From this example
I tried to validate user input when a button was clicked.
$("#check_data").click(function () {
var $userInput = $('#user_input'); //from HTML input box id="user_input"
var pattern = " /*My user input always be like "AB1234567"*/ ";
if ($userInput.val() == '' || !pattern.test($userInput.val())) {
alert('Please enter a valid code.');
return false;
}
});
My user input input always be like "AB1234567" with this exact same characters but different 7 digits number.
I'm new to Javascript and Jquery, if you have any better way to validate user input, please suggest it.
Thank you.

You can use below regex Expression to check
/[A-Za-z0-9]/g
Your code could be like this
var _pattern=/[A-Za-z0-9]/g
if($userInput.val().match(_pattern))
{
//your code goes here..
}
Thanks

You can use the below pattern to check
/^AB\d{7}$/
You can change code to
var pattern = '/^AB\d{7}$/';
if ($userInput.val() == '' || !pattern.test($userInput.val()))
{
alert('Please enter a valid code.');
return false;
}
\d{7} matches 7 digits in the range [0-9]

You can follow below code for this:
if ($userInput.val().match(/[^a-zA-Z0-9 ]/g))
{
// it is a valid value.
} else {
// show error here
}
Hope it helps you.

Try this one.
$("#check_data").click(function(){
var $userInput = $('#user_input').val();
var pattern = /^AB[0-9]{7}?/g;
if(!$userInput.match(pattern)){
alert('Please enter a valid code.');
return false;
}
});

How to allow only numbers between 0 to 30 or A,D character in input using javascript?

Hi i have created a javascript function to only allow numbers between 0 to 30 and character A and D. I give an alert if it does not match the criteria but if the user clicks ok on the alert the values still remain in the input and can be updated in the database. I want that user should not be able to enter anything at all in the input box except character A , D and numbers between 0 to 30 like it is done in the case of input type=number we can only enter numbers. My javascript function is:-
function validate() {
var regex = /[ad0-9]/gi;
var txt = document.getElementById('txt').value;
var valid = true;
var error = '';
if (regex.test(txt)) {
if (!isNaN(txt)) {
if (!(parseInt(txt) >= 0 && parseInt(txt) <= 30)) {
valid = false;
error = 'Please enter between 0 to 30.'
}
}
}
else {
valid = false;
error = 'Please enter between 0 to 30, A or D'
}
if (!valid) {
alert(error);
}
}
The javascript works fine with validation but after clicking ok in alert value still remains there and it also gives error when input box is empty any way to avoid that. Is there any other better way to create the function or can it done by using jquery. I am new to jquery if it is possible to do it with jquery it would be great. I would be highly gratefull if anybody can help.

You may try this code example.
function validate(box) {
var val = box.value;
if (!/^[AD]?$/.test(val) && isNaN(val) || (0 > val || 30 < val)) {
box.value = '';
alert('Only A or D or 0-30');
}
}
<input type='text' value='30' onblur='validate(this);' />

The best solution would be to check it at the moment when you are inserting it in the database.

if(txt.replace(/ /g, '').length == 0) {
// text is empty
return; // get out of function
}
If you want to make sure there is no error when the text is empty, you can do this. The .replace part is to ensure that if the text input is filled with only spaces, it is considered empty.
With the rest of the function:
function validate() {
var regex = /[ad0-9]/gi;
var txt = document.getElementById('txt').value;
var valid = true;
var error = '';
if(txt.replace(/ /g, '').length == 0) {
// text is empty
return; // get out of function
}
if (regex.test(txt)) {
if (!isNaN(txt)) {
if (!(parseInt(txt) >= 0 && parseInt(txt) <= 30)) {
valid = false;
error = 'Please enter between 0 to 30.'
}
}
}
else {
valid = false;
error = 'Please enter between 0 to 30, A or D'
}
if (!valid) {
alert(error);
}
}

How about replacing disallowed values so only the desired input is allowed. With this you won't be able to enter anything other than A, D and numbers 0 - 30:
$('input').on('input', function(e) {
this.value = this.value
.replace(/[^AD\d]/, '')
.replace(/(3)[1-9]/, '$1')
.replace(/(30)[0-9]/, '$1')
.replace(/([4-9])[0-9]/, '$1')
.replace(/([\d][\d])[\d]/, '$1');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="text" />
Note, it's still a good idea to do some server side validation.

php and javascript form validation issue

I have created a form using bootstrap and am using javascript for form validation and then a php script to grab the post data and display it
the basic structure is the following and I have made this as minimal as I could to address this specific issue. The issue I am having is that the script to check for the form validation works perfectly in the <script> tags at the end of the body, but instead of preventing the page from being submitted as it should it still processes to the next page with the form's contents that are being made through the php post action when the form is indeed not filled out correctly.
Why is this? Should the form validation still not stop the page from moving on to the post data since the validation is returning false if the form has not been submitted correctly. All the form validation alerts pop up correctly and I;m getting no console errors after checking, or do I need to perform an additional check to only process the post data if the form is valid?
<html>
other tags.....
<body>
<form name = "OrderForm" action = "process_order.php" onsubmit = "orderbutton" method = "post">
a bunch of content, divs, checkboxes, etc
</form>
</body>
<script>
function CheckForm() {
var Name = document.getElementById("Name");
var fries = document.forms.OrderForm.FryRadio;
var fryyes = fries[0].checked
var fryno = fries[1].checked
var bool = true;
if ((Name.value == "" || Name.value == "Name") || (!(document.getElementById("SandwichRadio").checked || document.getElementById("WrapRadio").checked))) {
bool = false;
}
else if (!(fryyes || fryno)) {
bool = false;
}
if (!(bool)) {
alert("Please fill out all of the required fields.");
return false;
}
else {
alert("Your order is being submitted");
console.log("Submitted")
}
};
</script>
</html>

You should call function on submit , I dont know what are you doing with current onsubmit='...'
So use following, call function when you submit the form.
<form name = "OrderForm" action = "process_order.php" onsubmit = "return CheckForm()" method = "post">
a bunch of content, divs, checkboxes, etc
</form>
For demo : Check Fiddle

first of all what you can do is:
you do not need the !fryes in another if statement:
you can do it also in the first if:
if ((Name.value == "" || Name.value == "Name") || (!(document.getElementById("SandwichRadio").checked || document.getElementById("WrapRadio").checked)) || ( (!(fryyes || fryno))) {
bool = false;
}
also what you can do is if bool is false, disable your submit button if there is any?
you can also do an onchange on the texboxes, that way you can validate each text box or checkbox one by one. and have the bool true and false?
I did something like this on jquery long time ago, for validation, where I checked each texbox or dropdown against database and then validate, aswell..
The code is below
<script>
$(document).ready(function(){
var works=true;
//Coding for the captcha, to see if the user has typed the correct text
$('#mycaptcha').on('keyup',function(){
if($('#mycaptcha').val().length>=5){
$.post("user_test/captcha_check.php",
{
// userid: $("#userlogin").val(),
mocaptcha: $("#mycaptcha").val(),
},
function(data,status){
if(data==0){
document.getElementById("final_error").innerHTML="Captcha did not match";
works=false;
}
if(data==1){
works=true;
document.getElementById("final_error").innerHTML="";
}
});
}
});
//Works like a flag, if any mistake in the form it will turn to false
//Coding the submit button...
$('#submitbtn').on('click',function(){
var arrLang = [];
var arrPrf = [];
uid = $("#userid").val();
capc = $('#mycaptcha').val();
pwd = $("#pwd1").val();
fname = $("#fname").val();
lname = $("#lname").val();
email = $("#memail").val();
pass = $("#pwd2, #pwd1").val();
daysel = $('#dayselect').val();
monthsel = $('#monthselect').val();
yearsel = $('#yearselect').val();
agree_term = $('#agree_box').prop('checked');
//checks if the textboxes are empty it will change the flag to false;
if((!uid) || (!capc) ||(!fname) || (!lname) || (!email) || (!pass) || (!daysel) || (!monthsel) || (!yearsel) || (!agree_term)){
works=false;
}
if(!works){
document.getElementById('final_error').innerHTML ="<font size='1.3px' color='red'>Please fill the form, accept the agreement and re-submit your form</font>";
}
else{
works=true;
//A jquery function, that goes through the array of selects and then adds them to the array called arrLang
$('[id=lang]').each(function (i, item) {
var lang = $(item).val();
arrLang.push(lang);
});
//A jquery function, that goes through the array of select prof and then adds them to the array called arrprf
$('[id=prof]').each(function (i, item) {
var prof = $(item).val();
arrPrf.push(prof);
});
var data0 = {fname: fname, mlname : lname, userid : uid,password:pwd, emailid : email, mylanguage : arrLang, proficient : arrPrf, dob : yearsel+"-"+monthsel+"-"+daysel};
//var json = JSON2.stringify(data0 );
$.post("Register_action.php",
{
// userid: $("#userlogin").val(),
json: data0,
},
function(data,status){
if(data==1){
//alert(data);
window.location = 'Registered.php';
}
document.getElementById("userid_error").innerHTML=data;
});
}
});
//to open the agreement in a seperate page to read it..
$("#load_agreement").click(function () {
window.open("agreement.html", "PopupWindow", "width=600,height=600,scrollbars=yes,resizable=no");
});
//A code that loads, another page inside the agreement div
$( "#agreement" ).load( "agreement.html" );
//This part here will keep generating, duplicate of the language and profeciency box, incase someone needs it
$('#Add').click(function(){
//we select the box clone it and insert it after the box
$('#lang').clone().insertAfter("#lang").before('<br>');
$('#prof').clone().insertAfter("#prof").before('<br>');
});
//this part here generates number 1-31 and adds into month and days
i=0;
for(i=1; i<=31; i++){
$('#dayselect').append($('<option>', {value:i, text:i}));
if(i<=12){
$('#monthselect').append($('<option>', {value:i, text:i}));
}
}
//this code here generates years, will work for the last, 120 years
year=(new Date).getFullYear()-120;
i = (new Date).getFullYear()-16;
for(i; i>=year; i--){
$('#yearselect').append($('<option>', {value:i, text:i}));
}
//Regex Patterns
var pass = /^[a-z0-9\.\-\)\(\_)]+$/i;
var uname = /^[a-z0-9\.\-]+$/i;
var mname = /^[a-z ]+$/i;
var emailReg = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
//When the Last Name texbox is changing this will be invoked
$("#fname").keydown(function(){
//comparing the above regex to the value in the texbox, if not from the box then send error
if(!mname.test($("#fname").val())){
//fill the textbox label with error
document.getElementById("fname_error").innerHTML="<font color='red' size='2px' family='verdana'>Invalid FirstName</font>";
$("#fname").css("border-color","rgba(255,0,0,.6)");
works=false;
}
else{
$("#fname").css("border-color","rgba(0,255,100,.6)");
document.getElementById("fname_error").innerHTML="";
works = true;
}
});//end of fname onchange
//When the Last Name texbox is changint this will be invoked
$("#lname").keydown(function(){
//comparing the above regex to the value in the texbox
if(!mname.test($("#lname").val())){
//fill the textbox label with error
document.getElementById("lname_error").innerHTML="<font color='red' size='2px' family='verdana'>Invalid LastName</font>";
$("#lname").css("border-color","rgba(255,0,0,.6");
works=false;
}
else{
$("#lname").css("border-color","rgba(0,255,100,.6)");
document.getElementById("lname_error").innerHTML="";
works = true;
}
});//end of lname on change
//When the userid textbox is chaning,this will be invoked
$("#userid").keydown(function(){
//comparing the above regex to the value in the texbox
if(!uname.test($("#userid").val())){
//fill the textbox label with error
document.getElementById("userid_error").innerHTML="<font color='red' size='2px' family='verdana'>Invalid UserId</font>";
$("#userid").css("border-color","rgba(255,0,0,.6");
works=false;
}
/*
else if($("#userid").val().length<4){
//fill the textbox label with error
document.getElementById("userid_error").innerHTML="<font color='red' size='2px' family='verdana'>Minimum user length is 4</font>";
$("#userid").css("border-color","rgba(255,0,0,.6");
//disable the submit button
//$('#submitbtn').attr('disabled','disabled');
works=false;
}
*/
else{
$("#userid").css("border-color","rgba(0,0,0,.3)");
$.post("user_test/user_email_test.php",
{
// userid: $("#userlogin").val(),
userid: $("#userid").val(),
},
function(data,status){
document.getElementById("userid_error").innerHTML=data;
});
works = true;
}
});//end of change
//When the userid textbox is chaning,this will be invoked
$("#memail").keydown(function(){
//comparing the above regex to the value in the texbox
if(!emailReg.test($("#memail").val())){
//fill the textbox label with error
document.getElementById("email_error").innerHTML="<font color='red' size='2px' family='verdana'>Invalid Email</font>";
$("#memail").css("border-color","rgba(255,0,0,.6");
works=false;
}
else{
works = true;
$.post("./user_test/user_email_test.php",{
useremail: $("#memail").val(),
},
function(data,status){
document.getElementById("email_error").innerHTML=data;
$("#memail").css("border-color","rgba(0,255,0,.3)");
works = true;
});
}
});//end of change
//When the userid textbox is chaning,this will be invoked
$("#pwd2").keyup(function(){
//checking length of the password
if($("#pwd2").val().length<10){
document.getElementById("pwd_error").innerHTML="<font color='red' size='2px' family='verdana'>Please enter a password minimum 10 characters</font>";
//$('#submitbtn').attr('disabled','disabled');
$("#pwd1, pwd2").css("border-color","rgba(0,255,100,.6)");
works=false;
}
//checking if the password matches
else if($("#pwd1").val()!=$("#pwd2").val()){
document.getElementById("pwd_error").innerHTML="<font color='red' size='2px' family='verdana'>Passwords do not match</font>";
//$('#submitbtn').attr('disabled','disabled');
works=false;
$("#pwd1, pwd2").css("border-color","rgba(0,255,100,.6)");
}
else{
$("#pwd1, #pwd2").css("border-color","rgba(0,0,0,.3)");
document.getElementById("pwd_error").innerHTML="";
//comparing the above regex to the value in the texbox and checking if the lenght is atleast 10
if(!pass.test($("#pwd2").val())){
//fill the textbox label with error
document.getElementById("pwd_error").innerHTML="<font color='red' size='1px' family='verdana'>Your password contains invalid character, Please use: a-z 0-9.( )_- only</font>";
$("#pwd1, #pwd2").css("border-color","rgba(255,0,0,.6");
works = false;
}
else{
$("#pwd1 , #pwd2").css("border-color","rgba(0,255,100,.6)");
works = true;
}
}
});//end of change
});//end of document ready
</script>

A password tester which alerts the user if spaces are present

A JavaScript program is required to request, via a dialogue box, a password
from a user. The input, which can be of any length, must be validated such
that it is only valid if it has no spaces. Any character, other than a space, is
permissible. As soon as a space is detected, the program should terminate
with a message provided in an alert box stating:
Invalid, contains a space!
Can anyone help me correct my code, this is my attempt
<!DOCTYPE html>
<html>
<body>
<form action="">
Password: <input type="password" name="password">
</form> ;
var i ;
var validpassword = "" ;
var passworduser ;
var isNoSpace = (?!.*\\s)
if(isNoSpace = false; i > charAt(i)) //
alert("Password contains a space!")
for(j = 1; j<=yourString.length; j++){
validpassword += ’*’;
}
document.write("valid password")
else
document.write("password not valid")
</body>
</html>

var containingSpace = function(str) {
return str.indexOf(' ') > -1;
}
console.log(containingSpace('abc')); // false
console.log(containingSpace('ab c')); // true

RegEx: /\s+/
var pattern = /\s+/;
if (pattern.test(userString)) {
document.write("password not valid");
} else {
document.write("valid password");
}

Try with var isNoSpace = passworduser == passworduser.replace(" ", "");.
It will check if the passworduser string is the same even when spaces are removed. If it is, it will return true (so isNoSpace = true).
The syntax I have used is equivalent to this
var isNoSpace;
if (passworduser == passworduser.replace(" ", "")) {
isNoSpace = true;
else
isNoSpace = false;

javascript client side validation loop

umm.. i would like to show users what they need to fill up if they did not fill their name, email or message.. example, they filled up their name but they did not filled up their email and message so an error will be display that they should fill up their email and message. my code here shows all errors even if they filled up their name.
function validate() {
var myName = document.getElementById("inputName");
var myEmail = document.getElementById("inputEmail");
var filter = /^[_a-z0-9]+(\.[_a-z0-9-]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i;
var myMessage = document.getElementById("inputMessage");
var isValid = true;
if(myName.value == "") {
var myNameError = document.getElementById("inputNameError");
myNameError.innerHTML = "Please provide your name.";
isValid = false;
}
if (!filter.test(myEmail.value)) {
var myEmailError = document.getElementById("inputEmailError");
myEmailError.innerHTML="Please provide your email.";
isValid = false;
}
if(myMessage.value == "") {
var myMessageError = document.getElementById("inputMessageError");
myMessageError.innerHTML = "Please provide your message.";
isValid = false;
}
return isValid;
}

You could give jQuery validation a try: http://jqueryvalidation.org/documentation/
It will relieve you of many validation headaches...

If my understanding of your question is correct. The following is your scenario:
First time you don't give value for any field, all errors are shown.
Second you give input for name field and expect name error do disappear, but still it is shown.
The reason is because you have 1 error division per input field (3 in total) and they are not hidden when the input is present. You could modify your code as below:
function validate() {
var myName = document.getElementById("inputName");
var myEmail = document.getElementById("inputEmail");
var filter = /^[_a-z0-9]+(\.[_a-z0-9-]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i;
var myMessage = document.getElementById("inputMessage");
var isValid = true;
var myNameError = document.getElementById("inputNameError");
var myEmailError = document.getElementById("inputEmailError");
var myMessageError = document.getElementById("inputMessageError");
//Initially hide all previous error messages.
myNameError.className="hidden";
myEmailError.className="hidden";
myMessageError.className="hidden";
if(myName.value == "") {
myNameError.className="visible";//make error message div visible only on error.
myNameError.innerHTML = "Please provide your name.";
isValid = false;
}
if (!filter.test(myEmail.value)) {
myEmailError.className="visible";//make error message div visible only on error.
myEmailError.innerHTML="Please provide your email.";
isValid = false;
}
if(myMessage.value == "") {
myMessageError.className="visible";//make error message div visible only on error.
myMessageError.innerHTML = "Please provide your message.";
isValid = false;
}
return isValid;
}
CSS
.hidden {display: none;}
.visible {display: block;}
EDIT Adding fiddle link based on comments.

Develop Reference

JavaScript is the programming language of the Web.

Validate email address in JavaScript - javascript

Related

How can I validate user input (characters and number) with javascript?

How to allow only numbers between 0 to 30 or A,D character in input using javascript?

php and javascript form validation issue

A password tester which alerts the user if spaces are present

javascript client side validation loop

Categories

Resources