how to validate email in javascript - javascript

I am working on a mvc 5 project .in contact us page I want user to send admin his / her emaiul address .so I want to validate email in javascript on that page .I wrote some code that does not work properly. I want you to help me plesae.
<script language="javascript">
function f1() {
var inputText = document.getElementById("email").value;
var mailformat = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (inputText.value.match(mailformat)) {
document.form1.text1.focus();
}
else {
alert("You have entered an invalid email address!");
document.form1.text1.focus();
event.preventDefault();
}
}
</script>

<form name="form" action="#" onSubmit="return f1()" method="POST">
<input type="email">
</form>
<script>
function f1(){
var email = document.forms["form"]["Email"].value;
var regex = /^([0-9a-zA-Z]([-_\\.]*[0-9a-zA-Z]+)*)#([0-9a-zA-Z]([-_\\.]*[0-9a-zA-Z]+)*)[\\.]([a-zA-Z]{2,9})$/;
if(!regex.test(email)){
alert("You have entered an invalid email address!");
return false;
}
}
</script>

You don't want inputText.value only inputText like this
<input type="text" id="email" />
<input type="submit" onClick="f1()"/>
<script language="javascript">
function f1() {
console.log(document.getElementById("email").value);
var inputText = document.getElementById("email").value;
console.log(inputText)
var mailformat = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (inputText.match(mailformat)) { // <<<<<<< here
//document.form1.text1.focus();
alert("correct")
}
else {
alert("You have entered an invalid email address!");
document.form1.text1.focus();
event.preventDefault();
}
}
</script>

A basic HTML and JS working code for validating email with JS is given here for u-
function validateForm()
{
var x = document.forms["myForm"]["email"].value;
var atpos = x.indexOf("#");
var dotpos = x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Not a valid e-mail address");
return false;
}
else
{
alert("Valid e-mail address");
return true;
}
}
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>
Think, u have your answer :)

function validateEmail(email) {
var re = ([\w-+]+(?:\.[\w-+]+)*#(?:[\w-]+\.)+[a-zA-Z]{2,7});
return re.test(email);
}

Related

Javascript Email Id Validation with checkbox

I am looking to do a Javascript email Id & checkbox validation. The validation is only working for the checkbox but not for the email id. how to correct it please?
codepen demo
function Validate()
{
var x=document.myform.email.value;
var atposition=x.indexOf("#");
var dotposition=x.lastIndexOf(".");
if (atposition<1 || dotposition<atposition+2 || dotposition+2>=x.length){
alert("Please enter a valid e-mail address");
return false;
}
return true;
}
function Validate(){
if(!validateForm()){
alert("Terms & Conditions!");
return false;
}
return true
}
function validateForm()
{
var c=document.getElementsByTagName('input');
for (var i = 0; i<c.length; i++){
if (c[i].type=='checkbox')
{
if (c[i].checked){return true}
}
}
return false;
}
// this function is called on form submit and checks the return values of both the email and checkbox function. if either of them are false, you will be alerted.
function MainFunction(){
if(!validateCheckBox() || !ValidateEmail() ){
return false;
}
alert("the form has been successfully submitted");
return true
}
// this function validates the email
function ValidateEmail()
{
var x=document.myform.email.value;
var atposition=x.indexOf("#");
var dotposition=x.lastIndexOf(".");
if (atposition<1 || dotposition<atposition+2 || dotposition+2>=x.length){
alert("Please enter a valid e-mail address");
return false;
}
return true;
}
// this function validates the checkbox
function validateCheckBox()
{
var c=document.getElementsByTagName('input');
for (var i = 0; i<c.length; i++){
if (c[i].type=='checkbox')
{
if (c[i].checked){return true}
}
}
alert("Terms & Conditions!");
return false;
}
//you had two of the same named function before. also you were only checking the return of one of the functions. Above checks the return values of both of the functions. Hope this helps
<form name="myform" id="form_id" method="post" onsubmit="return MainFunction();">
<input type="text" name="email" class="subscribe_email_nf" placeholder="Enter Your Email Id..."> <br />
<input type="checkbox" name="option1" value="1">Accept Terms & Conditions<br />
<input type="submit" value="Submit Form">
</form>

JavaScript Email address validation

I am making an HTML form with fields validation using JavaScript. I am stuck on email validation. I searched internet and found something like this-
JS Code
function validateemail() {
var x=document.myform.email.value;
var atposition=x.indexOf("#");
var dotposition=x.lastIndexOf(".");
if (atposition<1 || dotposition<atposition+2 || dotposition+2>=x.length) {
alert("Please enter a valid e-mail address \n atpostion:"+atposition+"\n dotposition:"+dotposition);
return false;
}
}
HTML Code
<body>
<form name="myform" method="post" action="#" onsubmit="return validateemail();">
Email: <input type="text" name="email"><br/>
<input type="submit" value="register">
</form>
Please explain me this?
Check this i am using something like this i minified some of them
You must Enter Valid Email address something like this Example#example.com
$(document).ready(function() {
$('.insidedivinput').focusout(function() {
$('.insidedivinput').filter(function() {
var emil = $('.insidedivinput').val();
var emailReg = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
if (emil.length == 0) {
$('.fa-check').css('display', 'none');
$('.fa-close').css('display', 'inline');
$('.sendmailbuttontrigger').attr('disabled', 'disabled');
$('.SendEmail').attr('disabled', 'disabled');
} else if (!emailReg.test(emil)) {
$('.SendEmail').attr('disabled', 'disabled');
$('.sendmailbuttontrigger').attr('disabled', 'disabled');
$('.fa-check').css('display', 'none');
$('.fa-close').css('display', 'inline');
} else {
// alert('Thank you for your valid email');
$('.fa-close').css('display', 'none');
$('.sendmailbuttontrigger').removeAttr('disabled');
$('.fa-check').css('display', 'inline');
}
})
});
});
.fa-check{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='email' class='insidedivinput'><i class='fa-check'>Validated</i><i class="fa-close">UnValidated</i>
<button class="sendmailbuttontrigger" disabled>
Send
</button>
If you just want to validate an email address, you can use the validation that's built into HTML:
<form onsubmit="return false;">
<input type="email" required="1">
<input type="submit">
</form>
(Leave out the onsubmit for your own form, of course. It's only in my example to keep you from leaving the page with the form.)
I also searched on the Internet and use this one and it's working.
// email validation
checkEmail = (inputvalue) => {
const pattern = /^([a-zA-Z0-9_.-])+#([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
if (pattern.test(inputvalue)) return true;
return false;
}

How to trigger function on false?

I have an input form that I want to validate email adresses (or just an # sign). But I only want validation when it's wrong, so remove everything from before the else statement in the jquery snippet?
EDIT
When the user input is wrong, in this case not an emailadress, inform the user.
HTML
<form onsubmit="validate(); return false;">
<p>Enter an email address:</p>
<input id="email">
<button type="submit" id="validate">Validate!</button>
</form>
<br>
<h2 id="result"></h2>
jQuery
function validateEmail(email) {
var re = /#/;
return re.test(email);
}
function validate(){
$("#result").text("");
var email = $("#email").val();
if (validateEmail(email)) {
$("#result").text(email + " is valid :)");
$("#result").css("color", "green");
} else {
$("#result").text(email + "is not valid :(");
$("#result").css("color", "red");
}
return false;
}
$("form").bind("submit", validate);
You can use not operator ! to reverse the condition like this:
function validate(){
$("#result").text("");
var email = $("#email").val();
if (!validateEmail(email)) { //email is invalid?
$("#result").text(email + "is not valid :(");
$("#result").css("color", "red");
//call a function to trigger
return false;
}
}

Javascript validation on my form not working properly

I want to make a form validation using JavaScript but its not working properly. Can someone please help me?
here is my code:
JavaScript
<script type="text/javascript">
var ck_name = /^[A-z]+$/;
var ck_email = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
var ck_username = /^[A-Za-z0-9_]{1,20}$/;
var ck_password = /^[A-Za-z0-9!##$%^&*()_]{6,20}$/;
function validate()
{
var name = document.form.name;
var email = document.form.email;
var username = document.form.username;
var password = document.form.password;
if (!ck_name.test(name)) {
window.alert("You must enter valid Name .");
name.focus();
return false;
}
if (!ck_email.test(email)) {
window.alert("You must enter a valid email address.");
email.focus();
return false;
}
if (!ck_username.test(username)) {
window.alert("Your valid UserName does not contain any special char.");
username.focus();
return false;
}
if (!ck_password.test(password)) {
window.alert("You must enter a valid Password ");
password.focus();
return false;
}
return true;
}
</script>
HTML
<form action="#" name="form" onsubmit="return validate();">
<p>Name: <input type="text" size="25" name="name"/></p>
<p>E-mail: <input type="text" size="25" name="email"/></p>
<p>UserName: <input type="text" size="25" name="username"/></p>
<p>Password: <input type="text" size="25" name="password"/></p>
<p><input type="submit" value="Send" name="submit" />
<input type="reset" value="Reset" name="reset" /></p>
</form>
You need to get form from document here is what you should use
var name = document.forms[0].name.value;
var email = document.forms[0].email.value;
var username = document.forms[0].username.value;
var password = document.forms[0].password.value;
This will only get html element
var name=document.forms[0].name
You need to get its value.
var name=document.forms[0].name.value;
Update the js code to get the element value
var name = document.forms['form'].elements['name'].value;
var email = document.forms['form'].elements['email'].value;
var username = document.forms['form'].elements['username'].value;
var password = document.forms['form'].elements['password'].value;
You are checking input elements instead you need to check their value.
Here is the updated/working code.
function validate() {
var name = document.form.name;
var email = document.form.email;
var username = document.form.username;
var password = document.form.password;
if (!ck_name.test(name.value)) {
window.alert("You must enter valid Name .");
name.focus();
return false;
}
if (!ck_email.test(email.value)) {
window.alert("You must enter a valid email address.");
email.focus();
return false;
}
if (!ck_username.test(username.value)) {
window.alert("Your valid UserName does not contain any special char.");
username.focus();
return false;
}
if (!ck_password.test(password.value)) {
window.alert("You must enter a valid Password ");
password.focus();
return false;
}
return true;
}
You should get elements' value. I just made some changes and works properly. Try this:
var ck_name = /^[A-z]+$/;
var ck_email = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
var ck_username = /^[A-Za-z0-9_]{1,20}$/;
var ck_password = /^[A-Za-z0-9!##$%^&*()_]{6,20}$/;
function validate() {
var name = document.form.name.value;
var email = document.form.email.value;
var username = document.form.username.value;
var password = document.form.password.value;
if (!ck_name.test(name)) {
window.alert("You must enter valid Name .");
name.focus();
return false;
}
if (!ck_email.test(email)) {
window.alert("You must enter a valid email address.");
email.focus();
return false;
}
if (!ck_username.test(username)) {
window.alert("Your valid UserName does not contain any special char.");
username.focus();
return false;
}
if (!ck_password.test(password)) {
window.alert("You must enter a valid Password ");
password.focus();
return false;
}
return true;
}
<form action="#" name="form" onsubmit="return validate();">
<p>Name:
<input type="text" size="25" name="name" />
</p>
<p>E-mail:
<input type="text" size="25" name="email" />
</p>
<p>UserName:
<input type="text" size="25" name="username" />
</p>
<p>Password:
<input type="text" size="25" name="password" />
</p>
<p>
<input type="submit" value="Send" name="submit" />
<input type="reset" value="Reset" name="reset" />
</p>
</form>

onsubmit passes even when js function returns false

I've read many posts considering this problem and for some reason none of the solutions work for me. I have several js functions for validation that are called in the main one that is appointed to the onSubmit tag in the form. Here is the js code:
<script type="text/javascript">
function validacijaForme() {
var username = document.getElementById('usname');
var email = document.getElementById('email');
var pass1 = document.getElementById('pass1');
var pass2 = document.getElementById('pass2');
if(validacijaUsername(username) && validacijaEmail(email) && validacijaSifri(pass1,pass2))
{
alert('success');
return true;
}
return false;
}
</script>
<script type="text/javascript">
function validacijaSifri(fieldId1, fieldId2)
{
var two = document.getElementById(fieldId1).value;
var three = document.getElementById(fieldId2).value;
if(two == three) { return true; }
alert("Warning!! passcodes must match!!!");
return false;
}
</script>
<script type="text/javascript">
function validacijaUsername(usname)
{
var letters = /^[A-Za-z]+$/;
if(letters.test(usname.value))
{
return true;
}
else
{
alert('Username must have alphabet characters only');
document.getElementById('usrname').focus();
return false;
}
}
</script>
<script type="text/javascript">
function validacijaEmail(email)
{
var mailformat = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(mailformat.test(email))
{
return true;
}
else
{
alert("You have entered an invalid email address!");
document.getElementById(email).focus();
return false;
}
}
and here is the html form code
<form class="form-signin" onSubmit="return validacijaForme();" name="registerForm" method = "POST" action="test.php" enctype="multipart/form-data">
<h2 class="form-signin-heading">Registracija</h2>
<input type="text" class="form-control" placeholder="Username" name="usrname" id="usname" autofocus>
<input type="text" class="form-control" placeholder="E-mail" name="email" id="email">
<input type="password" class="form-control" placeholder="Password" name="pass" id="pass1">
<input type="password" class="form-control" placeholder="Confirm password" id="pass2">
<button class="btn btn-lg btn-primary btn-block" name="dugme" type="submit">Register</button>
The problem is that all the alerts are working, meaning that those functions do validate the fields, and should return false, but the onSubmit tag doesn't seem to accept that value from the function.
The form doesn't submit and doesn't pass to test.php only if I type this:
<form class="form-signin" onSubmit="return false" name="registerForm" method = "POST" action="test.php" enctype="multipart/form-data">
submit the form with javascript submit()
<form id="myform" class="form-signin" onSubmit="validacijaForme();" name="registerForm"
method = "POST" action="test.php" enctype="multipart/form-data">
And in your function:
function validacijaForme() {
var username = document.getElementById('usname');
var email = document.getElementById('email');
var pass1 = document.getElementById('pass1');
var pass2 = document.getElementById('pass2');
if(validacijaUsername(username) && validacijaEmail(email) && validacijaSifri(pass1,pass2))
{
alert('success');
document.getElementById("myform").submit();
return false;
}
return false;
}
Your problem is related to your username id/name consistency. Use the console (F12) to debug this kind of thing.
<input type="text" class="form-control" placeholder="Username" name="usRname" id="usname" autofocus>
Change:
document.getElementById('usrname').focus();
To:
document.getElementById('usname').focus();
There are lots of errors in your code buddy | WORKING DEMO
function validacijaForme() {
var username = document.getElementById('usname');
var email = document.getElementById('email');
var pass1 = document.getElementById('pass1');
var pass2 = document.getElementById('pass2');
if(validacijaUsername(username) && validacijaEmail(email) && validacijaSifri(pass1,pass2))
{
alert('success');
return true;
}
return false;
}
function validacijaSifri(fieldId1, fieldId2)
{
var two = fieldId1.value;
var three = fieldId2.value;
if(two == three) { return true; }
alert("Warning!! passcodes must match!!!");
return false;
}
function validacijaUsername(usname)
{
var letters = /^[A-Za-z]+$/;
if(letters.test(usname.value))
{
return true;
}
else
{
alert('Username must have alphabet characters only');
document.getElementById('usname').focus();
return false;
}
}
function validacijaEmail(email)
{
var mailformat = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(mailformat.test(email.value))
{
return true;
}
else
{
alert("You have entered an invalid email address!");
document.getElementById('email').focus();
return false;
}
}

Categories