Why doesn't my Javascript Email Validation Work - javascript

I made a simple form with jquery and javascript, but the email verification (makes sure it has # or . in it, does not seem to work.
Here is the JSFiddle: http://jsfiddle.net/LCBradley3k/xqcJS/11/
Here is the code for the validation. Is it in the wrong spot?
function validateForm() {
var x = document.forms["signup"]["email"].value;
var atpos = x.indexOf("#");
var dotpos = x.lastIndexOf(".");
if(atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
$('#answer').html('Not a valid email')
return false;
}
}

First, your code contains an error because you're missing }.
Second, yo don't call validateForm when button join is clicked.
$('#join').click(function () {
var correct = true;
var validEmail = true;
$('input[type="text"]').each(function (indx) {
var $currentField = $(this);
if ($currentField.val() === '') {
$currentField.addClass('empty');
correct = false;
$currentField.one('keydown', function () {
$currentField.removeClass('empty');
});
} else {
$currentField.removeClass('empty');
}
});
function validateForm() {
var x = document.forms["signup"]["email"].value;
var atpos = x.indexOf("#");
var dotpos = x.lastIndexOf(".");
if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
correct = false;
validEmail = false;
}
}
validateForm();
if (correct) {
$('#answer').html('Thank You!');
setTimeout(function () {
$('.inputs').hide("slide", { direction: "up" }, 1000);
}, 2000);
} else {
if(validEmail)
$('#answer').html('Please fill highlighted fields.');
else
$('#answer').html('Not a valid email');
}
});

Related

Whats wrong with the following java script it gives me Uncaught reference error for the function?

I am trying to validate email address and zip-code, but this doesn't seem to work?
I am using button onClick="validateForm()", should i use input type="button"? does it make a difference?
function validateForm() {
var x = document.getElementById("e1").value;
var atpos = x.indexOf("#");
var r1 = false;
var dotpos = x.lastIndexOf(".");
if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
alert("Not a valid e-mail address");
} else {
r1 = true;
}
var patt = /[0-9]/g;
var zipc = document.getElementById("u1").value;
var result = zipc.match(patt);
if (result && r1) {
alert("Pattern matches for both");
} else {
alert("Pattern doesnt match");
}
}
It is working fine for me : https://jsfiddle.net/q4Lkkps4/
<input id="e1" type="text" />
<input id="u1" type="text" />
<button onclick="validateForm();">go</button>
<script>
function validateForm() {
var x = document.getElementById("e1").value;
var atpos = x.indexOf("#");
var r1 = false;
var dotpos = x.lastIndexOf(".");
if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
alert("Not a valid e-mail address");
} else {
r1 = true;
}
var patt = /[0-9]/g;
var zipc = document.getElementById("u1").value;
var result = zipc.match(patt);
if (result && r1) {
alert("Pattern matches for both");
} else {
alert("Pattern doesnt match");
}
}
</script>
Although same error as you said comes https://jsfiddle.net/dkyL41gr/
<script type="text/javascript">//<![CDATA[
window.onload=function(){
function validateForm() {
var x = document.getElementById("e1").value;
var atpos = x.indexOf("#");
var r1 = false;
var dotpos = x.lastIndexOf(".");
if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
alert("Not a valid e-mail address");
} else {
r1 = true;
}
var patt = /[0-9]/g;
var zipc = document.getElementById("u1").value;
var result = zipc.match(patt);
if (result && r1) {
alert("Pattern matches for both");
} else {
alert("Pattern doesnt match");
}
}
}//]]>
</script>
<body>
<input id="e1" type="text">
<input id="u1" type="text">
<button onclick="validateForm();">go</button>
</body>
Maybe you re using the script tags in a wrong way.
Please paste you test code here.

I am trying to validate a form with more than one function, but it only calls the last one even if i combine them with a comma

I am having a problem validating a form. When it submits it just runs the last function. When i try to combine them with a comma then it just runs them all consecutively. Here is my code:
<script type= "text/javascript">
function validateForm() {
var x = document.forms["myForm"]["name"].value;
if (x == null || x == "") {
alert("Name must be filled out");
return false;
}
}
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;
}
}
function validateForm() {
var x = document.forms["myForm"]["message"].value;
if (x == null || x == "") {
alert("Please Send Us a Message");
return false;
}
}
</script>
JavaScript doesn't handle redeclaring functions with the same name.
What is wrong with:
function validateForm() {
// x is a bad name for the variable.
var x = document.forms["myForm"]["name"].value;
// x can never be null, BTW.
if (x === "") {
alert("Name must be filled out");
return false;
}
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;
}
x = document.forms["myForm"]["message"].value;
if (x === "") {
alert("Please Send Us a Message");
return false;
}
}
Don't name your functions with the same name! You can call them validateName, validateEmail and validateMessage.
When you declare functions with the same name, the previous functions will be overriden by the last one.
If you want to call one function in onsubmit, you can set onsubmit=validteForm() and declare validateForm as:
function validateForm() {
validateName();
validateEmail();
validateMessage();
}
You are trying to have more than one value in one variable, which is not possible. The value you are defining will overwrite the definition which is already there. Change your function names.
Do it like bellow
<script>
function fun1 () {
alert('in first')
}
function fun2 () {
alert('in Second')
}
function fun3 () {
alert('in third')
}
</script>
call them like bellow onsubmit of form
<form action="" onsubmit="fun1();fun2();fun3();">
<input type="submit" value="click">
</form>
Another solution; you can modify your function(s) to a simple one, like following
function validateForm(){
var x, atpos, dotpos;
x = document.forms["myForm"]["name"].value;
if(!x){
alert("Name must be filled out");
return false;
}
x = document.forms["myForm"]["email"].value;
atpos = x.indexOf("#");
dotpos = x.lastIndexOf(".");
if(atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length){
alert("Not a valid e-mail address");
return false;
}
x = document.forms["myForm"]["message"].value;
if(!x){
alert("Please Send Us a Message");
return false;
}
return true;
}

JS Form Validation - Submit Button does nothing

I'm trying to validate my form, and the first alert works. But then when the user fills in correct data and clicks submit, the form does not submit anymore. Any help is appreciated, thanks!
<form name="register" action="register.php" onsubmit="return validateForm()" method="post">
// form stuff
function validateForm() {
if (!checkName() || !checkEmail()) {
return false;
} else {
return true;
}
}
function checkName() {
var name=document.forms["register"]["name"].value;
if (name==null || name=="") {
alert("Please fill out your name");
return false;
}
}
function checkEmail() {
var email=document.forms["register"]["email"].value;
var atpos=email.indexOf("#");
var dotpos=email.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) {
alert("Not a valid e-mail address");
return false;
}
}
You need checkEmail and checkName to return true when the email or name is present. What you've got now returns undefined.
Here is a fiddle showing the solution and here are the two functions rewritten:
function checkName() {
var name = document.forms["register"]["name"].value;
if (name == null || name == "") {
alert("Please fill out your name");
return false;
}
return true;
}
function checkEmail() {
var email = document.forms["register"]["email"].value;
var atpos = email.indexOf("#");
var dotpos = email.lastIndexOf(".");
if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= email.length) {
alert("Not a valid e-mail address");
return false;
}
return true;
}
I do ultimately think you'll be happier if you wind up going to jQuery Validation, though.

javascript form validation doesn't work properly

I'm trying to validate joinUs form
<form id="frmReg" method="post" onsubmit="return valRegs()" action="memb_area/register.php">
//js:
function valRegs(user, pass) {
if (!user || !pass) {
document.getElementById('labInfo').innerHTML = "* White fields required !";
return false;
}
var x = document.forms["frmReg"]["mail"].value;
var atpos = x.indexOf("#");
var dotpos = x.lastIndexOf(".");
if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
document.getElementById('labInfo').innerHTML = "Incorrect mail !";
return false;
}
};
Whichever field is filled or not, whatever is the content of mail field - the result is always: "* White fields required !". What's wrong, please?
The function will never be supplied the user and pass parameters. You will have to find these elements manually in the javascript.
onsubmit="return valRegs()" missed parameters
how are you passing the parameters to the js function. try
function valRegs() {
var user = document.getElementById('user').value;
var pass = document.getElementById('pass').value;
if (!user || !pass) {
document.getElementById('labInfo').innerHTML = "* White fields required !";
return false;
}
};

Need help simplyfying validation

I need help with simplifying/making shorter of the following validation code.
Help would be greatly appreciated.
At the moment there's too much text, my teacher said it could be done easier/cleaner...
I'm really stuck.
Thank you.
window.addEventListener('load',init,false);
function init(){
var submit = document.getElementById("submit");
var gender = document.getElementById("gender");
var age = document.getElementById("age");
var length = document.getElementById("length");
var weight = document.getElementById("weight");
var duration = document.getElementById("duration");
var time = document.getElementById("time");
submit.addEventListener('click', validation, false);
gender.addEventListener('checked',validategender,false);
age.addEventListener('blur', validateage, false);
length.addEventListener('blur',validatelength,false);
weight.addEventListener('blur',validateweight,false);
duration.addEventListener('blur',validateduration,false);
time.addEventListener('checked',validatetime,false);
}
function validategender(){
var man = document.getElementById("man");
var vrouw = document.getElementById("vrouw");
var genderfout = document.getElementById("genderFout");
if(man.checked != true && vrouw.checked !=true){
genderfout.innerHTML = "Please choose a gender";
return false;
}else {
genderfout.innerHTML = "";
}return true;
}
function validateage() {
var age = parseInt(document.getElementById("age").value, 10);
var ageFout = document.getElementById("ageFout");
if (isNaN(age) || age < 0 || age > 130) {
ageFout.innerHTML = "Please enter a valid age";
return false;
} else {
ageFout.innerHTML = "";
}
return true;
}
function validateweight() {
var weight = parseInt(document.getElementById("weight").value, 10);
var weightFout = document.getElementById("weightFout");
if (isNaN(weight) || weight < 30 || weight > 200) {
weightFout.innerHTML = "Please enter a valid weight";
return false;
} else {
weightFout.innerHTML = "";
}
return true;
}
function validatelength() {
var length = parseInt(document.getElementById("length").value, 10);
var lengthFout = document.getElementById("lengthFout");
if (isNaN(length) || length < 50 || length > 220) {
lengthFout.innerHTML = "Please enter a valid length";
return false;
} else {
lengthFout.innerHTML = "";
}
return true;
}
function validateduration() {
var duration = parseInt(document.getElementById("duration").value, 10);
var durationFout = document.getElementById("durationFout");
if (isNaN(duration) || duration < 0) {
durationFout.innerHTML = "Please enter a valid time-duration";
return false;
} else {
durationFout.innerHTML = "";
}
return true;
}
function validatetime(){
var minutes = document.getElementById("minutes");
var hours = document.getElementById("hours");
var timeFout = document.getElementById("timeFout");
if(minuten.checked !=true && uur.checked !=true){
timeFout.innerHTML = "choose a time unit!";
return false;
}else {
timeFout.innerHTML = "";
}
return true;
}
function validation(e){
var genderOk = validategender();
var ageOk = validateage();
var weightOk = validateweight();
var lengthOk = validatelength();
var durationOk = validateduration();
var timeOk = validatetime();
if (!genderOk || !ageOk || !weightOk || !lengthOk || !durationOk || !timeOk){
e.preventDefault();
}
}
if JQuery not allowed that leave another option
Regular expression
you can validate but needs a little reading
Use a JQuery validator
http://docs.jquery.com/Plugins/Validation
Your validation code will be reduced to half of what it is now or possibly much less.

Categories