In my short script, that is checking if submited email is in the right form, I always recive alert, no matter what I put in the form (email)
function checkEmail() {
var mail = document.getElementById('mail');
var filter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!filter.test(mail.value))
{
alert('Prosimo, vnesite veljaven email');
mail.focus;
return false;
}
}
Related
I have this newsletter form with email input generated with wordpress plugin. Form action is set to a sub-page. I want to check if given email adress is correct - if not, I want to print an alert message.
let emailField = document.querySelector('.email').value;
const regEx = /\S+#\S+\.\S+/;
let submitBtn = document.querySelector('.btn-submit');
let form = document.querySelectorAll('.newsletter-container > form');
function validateEmail() {
if (regEx.test(emailField) == false) {
alert('!!!');
event.preventDefault();
} else {
form.submit();
}
}
submitBtn.addEventListener('click', function (event) {
validateEmail();
});
My problem is, when I type a correct email adress I still get alert and button default event is prevented from action.
What am I doing wrong?
strange construct but anyhow
let submitBtn = document.querySelector('.btn-submit');
function validateEmail() {
var regEx = /\S+#\S+\.\S+/;
let emailField = document.querySelector('.email').value;
if (regEx.test(emailField) == false) {
alert('!!!');
event.preventDefault();
} else {
let form = document.querySelectorAll('.newsletter-container > form');
form.submit();
}
}
I am trying to write a JS function which blocks users from submitting a personal email. Here is the code. When I remove the "alert" line, the user is blocked from a successful form submission. But there is no alert that prompts them to enter a business email.
$("form").submit(function(){
// Get the email value from the input with an id="Email-2"
var email_addr = $('#Email-2').val();
// The regex to check it against
var re = '[a-zA-Z_\\.-]+#((hotmail)|(yahoo)|(gmail))\\.[a-z]{2,4}';
// Check if the email matches
if(email_addr.match(re)){
// Email is on the filter list
// Return false and don't submit the form, or do whatever
window.alert("Enter Business Email");
return false;
} else {
// Email ok
// Allow the form to be submitted
return true;
}});
Below is where there error is occuring. I'm new to Javascript so it very likely could be a syntax issue.
window.alert("Enter Business Email");
return false;
I found a solution that worked, changed the code to the following:
$('#wf-form-Book-Demo-Form').submit(function(){
var email = $('#Email-2').val();
var reg = /^([\w-\.]+#(?!gmail.com)(?!yahoo.com)(?!hotmail.com)(?!yahoo.co.in)(?!aol.com)(?!abc.com)(?!xyz.com)(?!pqr.com)(?!rediffmail.com)(?!live.com)(?!outlook.com)(?!me.com)(?!msn.com)(?!ymail.com)([\w-]+\.)+[\w-]{2,4})?$/;
if (reg.test(email)){
return 0;
}
else{
alert('Please Enter Business Email Address');
return false;
}
});
I have this HTML form and try to validate at client side.
This is the validation function at HTML form.
function registerValidate() {
var have_error = "No";
var email = $('#userEmail').val();
var pwd = $('#password').val();
var pwdr = $('#passwordr').val();
var email_re = /^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*#([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i;
if (!email.match(email_re)) {
$('#email-error').html('Please enter a valid email');
have_error = "Yes";
}else{
$('#email-error').html('');
}
}
When I click "Create My Account", all texts filled inside the text inputs disappeared and doesn't show the error message, even it should show error message.
What could be wrong?
When do you call this function? On form submit? Maybe you form have been submitted and all data field cleared.
Could you provide source code?
I have two javascript files that I am using to validate an email address.
validate.js:
function checkEmail(userEmail) {
var email = userEmail
var emailFilter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (emailFilter.test(email.value)) {
//alert('Please provide a valid email address');
//email.focus;
return true;
}
else{
return false
}
}
navigation.js EDIT:
$(document).ready(function() {
//ADDED IMPORTS
var imported = document.createElement('script');
imported.src = 'lib/validation.js';
document.head.appendChild(imported);
console.log("DOCUMENT IS READY!");
var viewsWrapper = $("#views-wrapper");
var loginButton = $("#login-button");
var registerButton = $("#register-button");
// Login Link
// TODO: Unclear if needed
$("ul li.login").click(function() {
$.get('/login', function(data) {
viewsWrapper.html(data);
});
});
$('#usernamefield').blur(function() {
var sEmail = $('#usernamefield').val();
if ($.trim(sEmail).length == 0) {
alert('Please enter valid email address');
e.preventDefault();
}
if (checkEmail(sEmail)) {
alert('Email is valid');
}
else {
alert('Invalid Email Address');
e.preventDefault();
}
});
...(more code follows but not relevant)
I am also using this jade template:
login.jade:
form(action="")
key EMAIL
input(type="text", name="username", id="usernamefield")
p hello world
br
key PASSWORD
input(type="text", name="password", id="passwordfield")
p hello world
br
input(type="submit", name="loginButton", id="login-button", value="LOGIN")
My issue is that when I input something into my email field, I do not get an alert message in any case. Am I allowed to just have to separate javascript files and call the methods I defined in validate.js within navigation.js? I tried putting the validate.js code in navigation.js, but even then it did not work. I would like to keep the files separate. Am I missing something obvious? I want it so that once the user inputs the email, and leaves the field, a message should appear warning if the email is valid or not.
Your help is appreciated.
Is it the blur Event or the checkEmail the problem? try to put a alert() or console.log() just after your blur (and make sure to lose focus on your input). Seperate file shouldn't be a problem. And also have you check for errors in your console ?
JavaScript string has no "value" field
After
var sEmail = $('#username').val();
sEmail becomes a string.
You are passing this string to checkEmail method and try to get "value" from a string:
if(!emailFilter.test(email.value)) {//...}
Replace to
if (!emailFilter.test(email)) {//...}
You are already sending the value of email into checkemail function. So in checkEmail function in validate.js remove email.value in second line of function checkEmail
function checkEmail(userEmail) {
var email = userEmail
var emailFilter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!emailFilter.test(email)) {
//alert('Please provide a valid email address');
email.focus;
return false;
}
}
When a form submit button is clicked, a function to validate all the field is to be called. Nothing is to happen, however, if the validation fails.
I am using mailto: as my action, does this make a difference?
I would like to get clarification on two things:
Is this the correct way to call a function when clicking the submit button?
$(document).ready(function(){
$('#contactForm').submit(function(){
checkMail();
});
});
Can I still validate the fields even though I'm using mailto:?
Here is the rest of the code:
function checkEmail(){
var email = document.contact.email.value;
if(email == "") {
document.getElemtById("email_error").innerHTML = "No Email Address";
return false;
}
else {
document.getElementById("email_error").innerHTML = ""
return true;
}
}
HTML:
<form name="contact" action="mailto:exampleemail#hotmail.com" method="post">
<li>
<label for="email">Email</label>
<input id="email" type="text" name="email" placeholder="Enter Email Address">
</li>
<span id="email_error"></span>
Further, I don't get an error message on clicking submit.
No, you need the event handler to return false in case the validation failed. This will prevent the action from being executed, i.e. the mail program from being launched.
we can cancel the submit action by calling .preventDefault() on the event object or by returning false from our handler.
Source
Modify it like this:
$(document).ready(function(){
$('#contactForm').submit(function(){
return validate();
});
});
Of course, this implies that the validate() function needs to actually return false in case the validation fails, and true otherwise.
Further you are missing id="contactForm" on your <form> tag.
Also, you need to grab the email value correctly:
var email = $("#email").val();
There's another mistake: You misspelled getElementById(). Here's a corrected version:
function checkEmail() {
var email = $("#email").val();
if (email == "") {
document.getElementById("email_error").innerHTML = "No Email Address";
return false;
}
else {
document.getElementById("email_error").innerHTML = ""
return true;
}
}
Or alternatively, using all jQuery:
function checkEmail() {
var email = $("#email").val();
var $error = $("#email_error");
if (email == "") {
$error.html("No Email Address");
return false;
}
else {
$error.html("");
return true;
}
}
Here's what you need:
$(document).ready(function(){
$('#contactForm').submit(function(){
if (!validate()) {
return false; // Prevent the submit
}
});
});
For validating the fields of your form, before sending it, you can use the jQuery's validation plugin:
$(document).ready(function(){
$("#contactForm").validate({
submitHandler: function(form) {
// some other code
// maybe disabling submit button
// then:
$(form).submit();
}
});
});
Check the online doc for more information and examples: http://docs.jquery.com/Plugins/Validation#Validate_forms_like_you.27ve_never_been_validating_before.21