I my HTMT page, I have a input field which receives an email address
My html:
...
<label for="email">E Mail :</label>
<input class="form-control email" type="text" type="email" required="required" th:value="${user?.mail}" name="emailChangeState" id="emailChangeState" />
...
My js:
..
var emailChangeState = document.getElementById('emailChangeState');
var result = validateEmail(emailChangeState.value);
..
if (!emailChangeState.value) {
showErrorAlert("Error", "No Valid Mail");
} else if (result != true) {
showErrorAlert("Error", "Mail look like xxx#yyy.com");
} else {
..
}
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,}))$/;
return re.test(email);
}
I want to ensure that I can write in my fields several email
Example:
yy#xx.com;tt#pp.com;zz#oo.com
but i have this js alert:
showErrorAlert("Error", "Mail look like xxx#yyy.com");
Thx
Use String.split(';') to extract emails to array and then loop through array with validator
Related
I'm creating a form where only a certain email address is accepted. If the wrong address is used, then a message should appear.
I want to use something like ".pattern != email" within my script, however I understand this attribute can only be used within input. I've tried to use .match as well without any success.
This is a snippet of the form:
<form onsubmit="return validation()">
<label for="email"> <b> Email: </b> </label>
<input type="email" name="email" id="emailinput" placeholder="Please enter email"
pattern=".+#gmail.com"> <span id="message"></span>
</form>
The relevant script:
<script>
funcion validation() {
if (document.getElementById("emailinput").pattern != ".+#gmail.com") {
document.getElementById("message").innerHTML
= "<em> Must be a gmail '#gmail.com' account </em>";
return false;
else
return true;}
</script>
#(gmail.com) will match #gmail.com specifically...
# matches the # symbol
Something like [a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+[\S] for the portion before your # section may work...
[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+[\S]#(gmail.com)
Run your email through a function and return regex.test(email), this will return a Boolean value that can be used in a conditional.
let email = document.getElementById('email');
let b = document.getElementById('b');
const emailIsValid = (email) => {
return /[\S]+#(gmail.com)/.test(email)
}
b.addEventListener('click', function() {
emailIsValid(email.value)?
console.log(emailIsValid(email.value)):
console.log(emailIsValid(email.value) + ': ' + email.value + ' is not valid gmail address!');
})
Enter an email: <input id="email"> <button id="b">Test It</button>
Hey so uh I have a project due in a few days which requires us to make a contact page where someone can enter a name, email address, subject and message. We need to create javascript to make sure all fields are filled in and that the email is valid.
I have written the HTML for the form, as well as the javascript but I have 2 problems:
No error message displays when no message is entered in the memo field
The email field will not accept a valid email
I have tried to change the ID tag for the email but it automatically allows me to submit straight away without entering any data, I'm quite stuck.
Yes, they are both in two separate documents.
Note: I have not included all the code for the contact page, just the relevant form.
Thank you so much
Here are the images of my code:
HTML for contact page:
Javascript for Contact page:
function checkForm(){
var isValid = true;
var name = document.forms['contact']['name'].value;
var email = document.forms['contact']['emailaddress'].value;
var emailpattern = /\S+#\S+\.\S+/;
var subject = document.forms["contact"]["subject"].value;
var textarea = document.forms["contact"]["memo"].value;
console.log(name, email, subject, textarea);
if(name == ""){
document.getElementById('namemessage').innerHTML = "PLEASE enter a name";
isValid = false;
} else {
document.getElementById('namemessage').style.display = "none";
}
if(!emailpattern.test(emailaddress)){
document.getElementById('emailmessage').innerHTML = "PLEASE enter a valid email";
isValid = false;
}
else {
document.getElementById('emailmessage').style.display = "none";
}
if(subject == ""){
document.getElementById('subjectmessage').innerHTML = "PLEASE enter a subject";
isValid = false;
} else {
document.getElementById('subjectmessage').style.display = "none";
}
if(memo == ""){
document.getElementById('memomessage').innerHTML = "PLEASE enter your request";
isValid = false;
} else {
document.getElementById('memomessage').style.display = "none";
}
return isValid;
}
<main><form action="thankyou.html" name="contact" onsubmit="return checkForm()">
<label for="name">Name:</label>
<input type="text" id="name">
<p id="namemessage"></p><br><br>
<label for="emailaddress">Email Address:</label>
<input type="text" id="emailaddress">
<p id="emailmessage"></p><br><br>
<label for="subject">Subject:</label>
<input type="text" id="subject"><p id="subjectmessage">
</p><br><br>
<label for=memo>Message:</label><br><br>
<textarea id="memo" placeholder = "please type your message here.">
</textarea>
<br><p id="memomessage"></p><br><br>
<input type="submit" value="Submit">
</form>
</main>
No error message displays when no message is entered in the memo field
Because you have:
var textarea = document.forms["contact"]["memo"].value;
...
if (memo == "") {
Change textarea to memo.
The email field will not accept a valid email
Because you have:
var email = document.forms['contact']['emailaddress'].value;
...
if (!emailpattern.test(emailaddress)) {
Change emailaddress to email.
Fix those issues and it "works".
I'm creating a form and validating it with JS. I want to make the email id optional. Either i can be left blank or filled. But i want to validate the email id only if the something's typed in the field. And i must use regexe.
"email":{
"regex":"/^([\.a-z0-9_\-]+[#][a-z0-9_\-]+([.][a-z0-9_\-]+)+[a-z]{1,4}$)/i",
"alertText":"* Invalid email address"}
What are the changes should me made here?
You'd have to do a two step validation I think. Apply a different validation check for the email field if its empty.
Since it's Javascript can you do something like:
if (str === '') {
validations['email'] = {}
} else {
validations['email'] = {
// email validation
}
}
I don't know of any other way to do it then that. Maybe there's something you can do with a regex like a condition check but considering how regex work I don't think that it is possible.
Try this
var $email = $('form input[name="email'); //change form to id or containment selector
var re = /[A-Z0-9._%+-]+#[A-Z0-9.-]+.[A-Z]{2,4}/igm;
if ($email.val() != '' && !re.test($email.val()))
{
alert('Please enter a valid email address.');
return false;
}
Try it :
if(email.length > 0) {
//Test Email is Valid Or Not
}
Final code :
<html>
<head>
</head>
<body>
Enter Email : <input type="text" id="txt">
<button onclick="isValid()">Test</button>
<script>
var ele = document.getElementById("txt");
function isValid(){
var email = ele.value;
var patt = /^[a-zA-Z0-9_\-]+#[a-zA-Z0-9_\-]+\.[a-z]{1,4}$/i;
if(email.length > 0) {
if(patt.test(email))
alert("Valid Address Email");
else
alert("Invalid address Email");
}
else
alert("Email is Empty : Valid Address Email");
}
</script>
</body>
</html>
Check links
<input style="margin-top: 20px;" type="text" placeholder="Enter an Email ID" name="Email" id="Email" pattern="((\w+\.)*\w+)#(\w+\.)+(com|kr|net|us|info|biz)" required="required">
I am new to html and coding in general.Hope someone can help me,thank in advance.I want it to alarm if i put wrong value but even if i put correct value it still alarm me.Here is my script:
$(document).ready(function() {
$("#name").blur(function(){
var value = this.value;
if(isNaN(value)){
alert("Wrong!Please enter your name again");
}
});
$("#email").blur(function(){
var value = this.value;
if(isNaN(value)){
alert("Wrong!Please enter your email again");
}
});
$("#submit").click(function(){
alert("Your message has been sent successfully!Thank you.")
});
});
And my code in jetbrain:
<div class="col-sm-6 form-group">
<input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
</div>
<div class="col-sm-6 form-group">
<input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
</div>
I think it's on your isnan jquery function. Please don't use that kind of function when validating inputs like emails. Instead you should create a variable to test whether the inputs contain valid characters.
For example:
$('#email').blur(function() {
var testEmail = /^[A-Z0-9._%+-]+#([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
if (testEmail.test(this.value)) alert('passed');
else alert('failed');
});
isNaN = is not a number.
You are checking if the input is numeric.
You probably want something like this:
if ($('#name').is(':empty')){
//do something
}
So in your case:
$(document).ready(function() {
$("#name").blur(function(){
if ($('#name').is(':empty')){
alert("Wrong!Please enter your name again");
}
});
$("#email").blur(function(){
if ($('#email').is(':empty')){
alert("Wrong!Please enter your email again");
}
});
$("#submit").click(function(){
alert("Your message has been sent successfully!Thank you.")
});
}
you just use those function in on submit because on blur not hold the submit process when user entred wrong value and try to submit it so that use like this.
$("#submit").click(function(){
var pattern = /^\b[A-Z0-9._%-]+#[A-Z0-9.-]+\.[A-Z]{2,4}\b$/i;
if ($('#name').val()==''){
alert("Wrong!Please enter your name");
return false;
}
if ($('#email').val()=='' || !pattern.test($('#email').val())){
alert("Wrong!Please enter Proper email");
return false;
}
alert("Your message has been sent successfully!Thank you.")
});
I have little problem with form and I am using js for validation.
Here is my form code.
<form method="get" onkeydown="checkEnter()" action="emailform.php" id="signupform" name="subscribe">
<input name="email" id="email" type="text" value="Enter Email for Updates" onfocus="if(this.value=='Enter Email for Updates'){this.value=''};" />
<input type="hidden" name="submitted" id="submitted" value="true" />
</form>
id signupform I am using for validation and submit the form is on pressing enter button.
But there is problem when put signupform then my validation start working fine and when I enter correct email it's show me error and when I remove the signupform id then my form submission work fine without validation.
Here is my JS code for id signupform.
function SubscribeForm() {
$('#signupform').submit(function () {
$('.email').removeClass('error')
$('em.error').remove();
var error = false;
var emailReg = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
if ($.trim($('.email').val()) == '') {
$(this).append('<em class="error">Please enter your email address.</em>');
$(this).addClass('error');
error = true;
} else if (!emailReg.test(jQuery.trim($('.email').val()))) {
$(this).append('<em class="error">Please enter a valid email address</em>');
$(this).addClass('error');
error = true;
}
if (!error) {
$("#submit", this).after('<span id="form_loading"></span>');
var formValues = $(this).serialize();
$.post($(this).attr('action'), formValues, function (data) {
$("#signupform").before(data);
});
$(':input[type="text"]').attr('value', '');
}
return false
});
}
change
return false
to
return error;
it is causing problem.
change
return false;
to
return !error;
Also, add css class "email" to input email field, or change jquery to selector code ".email" to "#email"
Also a possible solution, if you don't need to support the old browser: placeholder.
<input placeholder="Enter email" type="text"... />
Thanks for your help Guys. i just put this and now working fine.
$('#signupform').submit(function(){
$('.email').removeClass('error')
$('em.error').remove();
var filter = /^([\w-\.]+)#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
sEmail = document.getElementById('email').value;
if (filter.test(sEmail)) {
return true;
}
else {
if(sEmail == '')
{
$(this).append('<em class="error">Please enter your email address</em>');
$(this).addClass('error');
}
else
{
$(this).append('<em class="error">Please enter a valid email address</em>');
$(this).addClass('error');
}
return false;
}
});
});