javascript form validation doesn't work properly - javascript

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;
}
};

Related

Partial validation executed

I am trying to do few validations in a form and it is not up to the mark. I need to hide the error message message of the name and show only email error. But it is not happening. Maybe you will understand from the code.
Here it is.
function validateform(form){
event.preventDefault();
console.log(form);
var i;
var fname = form.name.value;
var email = form.email.value;
var message = form.getElementsByClassName("error-message");
var atpos = email.indexOf("#");
var dotpos = email.lastIndexOf(".");
if (fname==null || fname==""){
for (i = 0; i < message.length;i++)
{
form.getElementsByClassName("error-message")[i].innerHTML="Please Enter Name";
return false;
}
}
else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) {
for (i = 0; i < message.length;i++)
{
form.getElementsByClassName("error-email")[i].innerHTML="The email address you've entered contains an incorrect character. Please check this information and try again.";
return false;
}
}
else if (fname!=null || fname!=""){
for (i = 0; i < message.length;i++)
{
form.getElementsByClassName("error-message")[i].style.display = "none";
return false;
}
}
HTML
<form name="ccform" method="post" onsubmit="validateform(this)">
<p class="customer-name">Name</p>
<input type="text" class="input-name" name="name"></input>
<p class="error-message"></p>
<p class="customer-name">Email</p>
<input type="text" class="input-name" name="email" placeholder="e.g. name#emailaddress.com"></input>
<p class="error-email"></p>
<button type="submit" class="submit-button">Submit</button>
</form>
I want to hide error-message and show only error-email when name is entered,email is not entered and i press submit button.
P.S: Please no jQuery.
You have trying to hide error_message class in an else if condition. The code will not parse through all the if conditions. In your case, you want to show the email validation message and hence it will enter the second condition and will not enter the third condition. Refer the usage of if-else if-else statement here. You just try to merge the second and third condition together as follows.
if (fname==null || fname==""){
for (i = 0; i < message.length;i++)
{
form.getElementsByClassName("error-message")[i].innerHTML="Please Enter Name";
form.getElementsByClassName("error-message")[i].style.display = "block";
return false;
}
} else {
form.getElementsByClassName("error-message")[i].style.display = "none";
}
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) {
for (i = 0; i < message.length;i++)
{
form.getElementsByClassName("error-email")[i].innerHTML="The email address you've entered contains an incorrect character. Please check this information and try again.";
form.getElementsByClassName("error-email")[i].style.display = "block";
return false;
}
} else {
form.getElementsByClassName("error-email")[i].style.display = "none";
}
Hope it helps.
This is what worked for me.
function validateform(form){
var i;
var fname = form.name.value;
var email = form.email.value;
var message = form.getElementsByClassName("error-message");
var atpos = email.indexOf("#");
var dotpos = email.lastIndexOf(".");
if (fname==null || fname==""){
for (i = 0; i < message.length;i++)
{
form.getElementsByClassName("error-message")[i].innerHTML="Please enter your name";
form.getElementsByClassName("error-message")[i].style.display = "block";
form.getElementsByClassName("error-email")[i].style.display = "none";
return false;
}
}
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) {
for (i = 0; i < message.length;i++)
{
form.getElementsByClassName("error-email")[i].innerHTML="The email address you've entered contains an incorrect character. Please check this information and try again.";
form.getElementsByClassName("error-message")[i].style.display = "none";
form.getElementsByClassName("error-email")[i].style.display = "block";
return false;
}
}

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.

How do I check to make sure form fields are not empty strings?

I am trying to get my validateForm() method to make sure email is valid (which I have done) and also make sure the 'name' and 'comments' fields are not empty. For some reason I cannot get the second part down, and need some assistance. Here is the current code I have.
<script type="text/javascript">
<!--
function validateForm() {
var x = document.forms["myForm"]["email"].value;
var x = document.forms["myForm"]["name"].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;
}
}
}
if (x == null || x == "") {
alert("Empty Fields");
return false;
}
}
// -->
</script>
And the form:
<form name="myForm" action="http://webdevfoundations.net/scripts/formdemo.asp" onsubmit="return validateForm()" method="POST">
Your name: <br>
<input type="text" name="name" ><br>
<br>
Your email: <br>
<input type="text" name="email"><br>
<br>
Your comments: <br>
<textarea name="comments" rows="15" cols="50"></textarea><br><br>
<input type="submit" value="Submit">
</form>
Why are you using same variable for both field name and email. It doesn't make sense.
There is one more syntax error in your code i.e. You have put an extra } before checking second condition. So it makes that condition outside of that function
function validateForm() {
var x = document.forms["myForm"]["email"].value;
var y = document.forms["myForm"]["name"].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;
}
if (x == "" || y == "") {
alert("Empty Fields");
return false;
}
}
So here is JS Fiddle Example
You are assigning both the form fields to the variable x
You should opt below points to keep in mind for above code
(1) validation for Empty fields should come first then Email checking.
(2) As per the code, your Empty field logic is not a part of validateForm() (It might be typo),so when validationForm() method will called,this logic won't execute
(3) you should write return true at the end of method validateForm()
(4) Use different variable names of field checking
GO through above points,it will be helpful to solve your Issue. :)
First there are syntax error in your code. It seems that there are two redunant curly braces. And then you assign both the two fields to x, and only the name field get its value. Also, you'd better first check the email field empty or not and then operate on it. Finally I don't think your check for email is right. For example: xxx#a.info. So you may try:
function checkEmail(aEmail){
var pattern=//w+([-+.']/w+)*#/w+([-.]/w+)*/./w+([-.]/w+)*/;
var objExp=new RegExp(pattern);
if(objExp.test(str)==true){
return true;
}else{
return false;
}
}
function validateForm() {
var x = document.forms["myForm"]["email"].value;
var y = document.forms["myForm"]["name"].value;
if (x == "" || y == "") {
alert("Empty Fields");
return false;
}
if (!checkEmail(y)) {
alert("Not a valid email");
return false;
}
}
You should try this way:
function validateForm(){
var x=document.forms["myForm"].getElementsByName('email').value;
var y=document.forms["myForm"].getElementsByName('name').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;
}
if (y==null || y==""){
alert("Empty Fields");
return false;
}
}

Why doesn't my Javascript Email Validation Work

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');
}
});

Categories